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 
     
        2     
        3 
     

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 });