본 글의 예시는 참고용으로 이미지 확대 기능을 구현하기 위한 jquery의 구체적인 구현 코드를 공유합니다.
이미지 확대 기능은 타오바오 상품보기와 유사하며, 작은 이미지 위에 마우스를 올리면 해당 위치에 큰 이미지가 표시됩니다. 이 코드를 직접 작성하는 것은 고통스러울 것입니다. 클래스 라이브러리 - jquery.jqzoom.js는 공식 웹사이트에 제공됩니다. 하위 클래스 라이브러리를 소개하고, 이 클래스 라이브러리를 참조하고, 이 기능을 구현하려면 CSS 코드를 추가하기만 하면 됩니다.
HTML 프레임워크는 다음과 같습니다.
<div class="jqzoom"> <img src="images/pro_img/blue_one_small.jpg" class="fs" 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>