jquery_jquery를 기반으로 이미지 확대 기능 구현

본 글의 예시는 참고용으로 이미지 확대 기능을 구현하기 위한 jquery의 구체적인 구현 코드를 공유합니다.

이미지 확대 기능은 타오바오 상품보기와 유사하며, 작은 이미지 위에 마우스를 올리면 해당 위치에 큰 이미지가 표시됩니다. 이 코드를 직접 작성하는 것은 고통스러울 것입니다. 클래스 라이브러리 - jquery.jqzoom.js는 공식 웹사이트에 제공됩니다. 하위 클래스 라이브러리를 소개하고, 이 클래스 라이브러리를 참조하고, 이 기능을 구현하려면 CSS 코드를 추가하기만 하면 됩니다. HTML 프레임워크는 다음과 같습니다.

<div class="jqzoom">
  <img class="fs lazy"  src="/static/imghwm/default1.png"  data-src="images/pro_img/blue_one_small.jpg"  alt="" jqimg="images/pro_img/blue_one_big.jpg" id="bigImg"/>
</div>

img에는 ​​ jqimg 속성이 있어야 합니다. 이 속성은 큰 이미지의 주소를 보유합니다 .

js 코드는 다음과 같습니다.

<script type="text/javascript">
    $(function () {
      $(".jqzoom").jqueryzoom({
        xzoom: 300,   //放大图的宽度（默认是200）
        yzoom: 300,   //放大图的高度（默认是200）
        offset: 10,   //离原图的距离（默认是10）
        position: "right",   //放大图的定位（默认是"right"）
        preload: 1
      })
    })
  </script>

사용법: $(".jqzoom").jqueryzoom

이 정도의 코드만 추가하면 효과는 나오겠지만 그리 이상적이지는 않습니다. 더 아름다워지려면 다음 CSS 코드를 추가해야 합니다.

<style type="text/css">
    .jqzoom{
      border:1px solid #BBB;
      float:left;
      position:relative;
      padding:0px;
      cursor:pointer;
    }
    
    /*jQzoom*/
    div.zoomdiv {
      z-index:  999;
      position        : absolute;
      top:0px;
      left:0px;
      width          : 200px;
      height         : 200px;
      background: #ffffff;
      border:1px solid #CCCCCC;
      display:none;
      text-align: center;
      overflow: hidden;
    }
    div.jqZoomPup {
      z-index         : 999;
      visibility       : hidden;
      position        : absolute;
      top:0px;
      left:0px;
      width          : 50px;
      height         : 50px;
      border: 1px solid #aaa;
      background: #ffffff url(../images/zoomlens.gif) 50% top no-repeat;;
      opacity: 0.5;
      -moz-opacity: 0.5;
      -khtml-opacity: 0.5;
      filter: alpha(Opacity=50);
    }
  </style>

위 내용은 이 글의 전체 내용입니다. jquery 프로그래밍을 배우는 모든 분들께 도움이 되기를 바랍니다.