jQuery+css 에서 실 현 된 클릭 이미지 확대 축소 미리 보기 기능 예제[이미지 미리 보기 큰 그림 보기]

2619 단어 jQuery그림.확대 축소
본 고의 실례 는 jQuery+css 가 실현 한 클릭 이미지 확대 축소 미리 보기 기능 을 설명 한다.여러분 께 참고 하도록 공유 하 겠 습 니 다.구체 적 으로 는 다음 과 같 습 니 다.
요구 하 다.
그림 한 장 을 클릭 하면 그림 이 확대 되 고 큰 그림 을 보 며 공백 을 클릭 하면 큰 그림 을 숨 기 고 미리 보기 그림 으로 돌아간다.
기술 요점
주로 Jquery 에서 요 소 를 표시 하고 숨 깁 니 다.
코드

<!DOCTYPE html>
<html>
<head>
  <title>qqq</title>
  <meta charset="utf-8">
  <style type="text/css">
    *{
      margin:0;
      padding:0;
    }
    
    h1{
      text-align: center;
      margin:20px 0;
    }

    #imgdiv{
      width: 500px;
      margin:50px auto;
    }

    #imgdiv img{
      width: 300px;
      margin:0 100px;
    }

    #bigimg{
      width: 100%;
      height: 100%;
      position: fixed;
      background: rgba(0,0,0,.3);
      top: 0;
      display: none;
    }

    #bigimg img{
      width: 1000px;
      margin:auto;
      position: fixed;
      left:0;
      right:0;
      top: 80px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <h1>     -   /  </h1>
  <!--      -->
  <div id="imgdiv" onclick="imgbig();">
    <img src="zsdfsaerg.jpg" id="imgsrc" />
  </div>

  <!--       -->
  <div id="bigimg" onclick="closeimg();"></div>
</body>

<!-- JS -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.1.1/jquery.js"></script>
<script>
function imgbig() {
  var imgsrc = $('#imgsrc').attr('src');
  $("#bigimg").css("display","block");
  $("#bigimg").html("<img src="+imgsrc+" />");
}

function closeimg() {
  $("#bigimg").css("display","none");
}
</script>
</html>
demo

관심 있 는 친 구 는 온라인 HTML/CSS/JavaScript 코드 실행 도 구 를 사용 할 수 있 습 니 다http://tools.jb51.net/code/HtmlJsRun상기 코드 실행 효 과 를 테스트 할 수 있 습 니 다.
jQuery 관련 내용 에 관심 이 있 는 독자 들 은 본 사이트 의 주 제 를 볼 수 있다.
본 고 에서 말 한 것 이 여러분 의 jQuery 프로 그래 밍 에 도움 이 되 기 를 바 랍 니 다.
asp javascript 값 의 상호 전달 방법
CSS 스타일 시트 계획 및 관리 경험 총화

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage