此功能类似于淘宝上的商品的查看，如果鼠标移动到小图上就会在相应的位置显示出大图。如果自己写这些代码，会很痛苦。官方网站上提供了一个类库——jquery.jqzoom.js；只需要引入次类库，引用此类库，添加一些css代码即可实现此功能；
HTML框架如下：
1 <div class="jqzoom"> 2 <img src="images/pro_img/blue_one_small.jpg" class="fs" alt="" jqimg="images/pro_img/blue_one_big.jpg" id="bigImg"/> 3 </div>
注意，img中必须有jqimg属性，这个属性放的是大图的地址；
js代码如下：
1 <script type="text/javascript"> 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 }) 11 </script>
用法：$(".jqzoom").jqueryzoom
如果只添加这么多代码效果会出来，但是不是那么的理想。为了更加美观，必须添加如下的css代码：
1 <style type="text/css"> 2 .jqzoom{ 3 border:1px solid #BBB; 4 float:left; 5 position:relative; 6 padding:0px; 7 cursor:pointer; 8 } 9 10 /*jQzoom*/ 11 div.zoomdiv { 12 z-index: 999; 13 position : absolute; 14 top:0px; 15 left:0px; 16 width : 200px; 17 height : 200px; 18 background: #ffffff; 19 border:1px solid #CCCCCC; 20 display:none; 21 text-align: center; 22 overflow: hidden; 23 } 24 div.jqZoomPup { 25 z-index : 999; 26 visibility : hidden; 27 position : absolute; 28 top:0px; 29 left:0px; 30 width : 50px; 31 height : 50px; 32 border: 1px solid #aaa; 33 background: #ffffff url(../images/zoomlens.gif) 50% top no-repeat;; 34 opacity: 0.5; 35 -moz-opacity: 0.5; 36 -khtml-opacity: 0.5; 37 filter: alpha(Opacity=50); 38 } 39 </style>