1.引入jQuery和jqzoom插件
<script src="/js/common/jquery-1.6.2.js" type="text/javascript"></script>
<script src="/js/common/jquery.jqzoom.js" type="text/javascript"></script>
2、应用官方网站给定的jqzoom样式
1 /*jQzoom*/ 2 .jqzoom{ 3 border:1px solid #BBB; 4 float:left; 5 position:relative; 6 padding:0px; 7 cursor:pointer; 8 } 9 div.zoomdiv { 10 z-index: 999; 11 position : absolute; 12 top:0px; 13 left:0px; 14 width : 200px; 15 height : 200px; 16 background: #ffffff; 17 border:1px solid #CCCCCC; 18 display:none; 19 text-align: center; 20 overflow: hidden; 21 } 22 div.jqZoomPup { 23 z-index : 999; 24 visibility : hidden; 25 position : absolute; 26 top:0px; 27 left:0px; 28 width : 50px; 29 height : 50px; 30 border: 1px solid #aaa; 31 background: #ffffff url(/images/shopping/zoomlens.gif) 50% top no-repeat; 32 opacity: 0.5; 33 -moz-opacity: 0.5; 34 -khtml-opacity: 0.5; 35 filter: alpha(Opacity=50); 36 }
3、编写HTML代码：创建一个放图片的容器（最好是 DIV），并给 class 赋值为 jqzoom（必须为jqzoom，否则无法实现），然后给每张图片设置一个 jqimg 属性，它的值为大图的地址。
1 <div class="jqzoom"> 2 <img src="/images/shopping/pro_img/blue_one_small.jpg" jqimg="/images/shopping/pro_img/blue_one_big.jpg" id="bigImg"/> 3 </div>
4、查看官方网站的API使用说明，可以写出如下JS代码
1 /*使用jqzoom*/ 2 $(function() { 3 $(".jqzoom").jqueryzoom({ 4 xzoom: 300, //放大图的宽度(默认是 200) 5 yzoom: 300, //放大图的高度(默认是 200) 6 offset: 10, //离原图的距离(默认是 10) 7 position: "right", //放大图的定位(默认是 "right") 8 preload: 1 9 }); 10 });