<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>产品图片放大镜效果</title><script src="../jquery-1.7.2.min.js" type="text/javascript"></script><script src="jquery.jqzoom.js" type="text/javascript"></script><script type="text/javascript"> $(function(){ $(".jqzoom").jqzoom({ zoomType:"standard", lens:true, preloadImages:false, alwaysOn:false, zoomWidth:340, zoomHeight:340, xOffset:10, yOffset:0, position:"right", }); })</script><style type="text/css"> .zoomPad{ width:340px; height:340px; position:relative; z-index:90; float:left; } .zoomPup{ z-index:99; background:#fff; opacity:0.6; filter:alpha(opacity=60); cursor:crosshair; } .zoomWrapper{ width:340px; height"340px; overflow:hidden; position:relative; border:1px solid #999; } .zoomWrapperTitle{ height:18px; width:100%; background:#999; text-align:center; line-height:18px; position:absolute; left:0; top:0; z-index:100; }</style></head><body> <div class="jqzoomWrap"> <a href="blue_one_big.jpg" class="jqzoom" rel="gall" title> <img src="blue_one_small.jpg" id="bigImg" title="免烫纯棉条纹衬衫" alt="免烫纯棉条纹衬衫" /> </a> </div> <div > <h3>jqzoom.js插件的各项参数说明</h3> zoomType ：'standard'，'reverse' 默认'standard','reverse' 的时候开启透明;<br />p_w_picpathOpacity ：默认0.2 透明度 开启'reverse' 的时候可用;<br />zoomWidth： 宽度 zoomHeight 高度 默认都是200;<br />xOffset ：默认10 x方向放大效果div的偏移<br />yOffset ：默认0 y方向放大效果div的偏移<br />position： 默认'right' 可选 :'right' ,'left' ,'top' ,'bottom' 放大效果的位置<br />lens ：默认true 被放大区域是否突出<br />title ：默认true 标题<br />showEffect： 默认 'show' 可选'show' ,'fadein' 开启渐入效果<br />hideEffect： 默认'hide' 可选 'hide' ,'fadeout' 开启渐处效果<br />fadeinSpeed fadeoutSpeed ：可选 'fast','slow','medium' 默认 'slow' 出 入的速度<br />showPreload true/false：是否显示加载<br />preloadText： 默认 'Loading zoom' 加载是的标题<br />preloadPosition： 默认 'center' 加载区位置（可自行更改css） </div></body></html>

有了这个插件，电商网站上产品放大镜的效果变得很简单了。

附件中有实例提供。

附件：http://down.51cto.com/data/2363211