1、引入jqurty和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*/
.jqzoom{
  border:1px solid #BBB;
  float:left;
  position:relative;
  padding:0px;
  cursor:pointer;
}
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/shopping/zoomlens.gif) 50% top no-repeat;
  opacity: 0.5;
  -moz-opacity: 0.5;
  -khtml-opacity: 0.5;
  filter: alpha(Opacity=50);
}

3、编写HTML代码

<div class="jqzoom">
  <img src="/images/shopping/pro_img/blue_one_small.jpg" style="width:300px; height:300px;" alt="" jqimg="/images/shopping/pro_img/blue_one_big.jpg" id="bigImg"/>
</div>

4、查看官方网站的API使用说明，可以写出如下JS代码

/*使用jqzoom*/
$(function() {
  $(".jqzoom").jqueryzoom({
    xzoom: 300, //放大图的宽度(默认是 200)
    yzoom: 300, //放大图的高度(默认是 200)
    offset: 10, //离原图的距离(默认是 10)
    position: "right", //放大图的定位(默认是 "right")
    preload: 1
  });
});

页面代码：

• zoomType，默认值：’standard’，另一个值是’reverse’，是否将原图用半透明图层遮盖。
• zoomWidth，默认值：200，放大窗口的宽度。
• zoomHeight，默认值：200，放大窗口的高度。
• xOffset，默认值：10，放大窗口相对于原图的x轴偏移值，可以为负。
• yOffset，默认值：0，放大窗口相对于原图的y轴偏移值，可以为负。
• position，默认值：’right’，放大窗口的位置，值还可以是:’right’ ,’left’ ,’top’ ,’bottom’。
• lens，默认值：true，若为false，则不在原图上显示镜头。
• imageOpacity，默认值：0.2，当zoomType的值为’reverse’时，这个参数用于指定遮罩的透明度。
• title，默认值：true，在放大窗口中显示标题，值可以为a标记的title值，若无，则为原图的title值。
• showEffect，默认值：’show’，显示放大窗口时的效果，值可以为: ‘show’ ,’fadein’。
• hideEffect，默认值：’hide’，隐藏放大窗口时的效果: ‘hide’ ,’fadeout’。
• fadeinSpeed，默认值：’fast’，放大窗口的渐显速度(选项: ‘fast’,'slow’,'medium’)。
• fadeoutSpeed，默认值：’slow’，放大窗口的渐隐速度(选项: ‘fast’,'slow’,'medium’)。
• showPreload，默认值：true，是否显示加载提示Loading zoom(选项: ‘true’,'false’)。
• preloadText，默认值：’Loading zoom’，自定义加载提示文本。
• preloadPosition，默认值：’center’，加载提示的位置，值也可以为’bycss’，以通过css指定位置。