要求：公司某个网站需要实现图片预览效果，可以实现像淘宝一样大的本地部分！思考：为了考虑开发速度，首先考虑的是使用网络上现成的代码！但是一般搜索一下，网上可查的代码并不多，有些结果并不理想！而且有些代码估计读起来比自己写一个还贵，于是写jquery插件的想法就产生了！原理：最重要的原理是，两张图，一张小图和一张大图，先得到鼠标在小图上的坐标，然后用div显示大图，按照小图坐标乘以大图除以小图的倍数来定位！首先将大图设置为平铺，不重复北视图，然后利用背景的位置属性进行定位，比较理想。但是在IE6下，画面闪烁，所以反而以画面的绝对定位模式显示！效果图：

代码：复制代码如下： /* * * JQUERY的简易放大镜插件-JNMagnifier * Author:的翅膀初衷* QQ :4585839 * date :2011-11-16 * */(函数($)。{ $ . fn . jn放大镜=函数(设置){ if(setting setting . render to){ if(type of(setting . render to)=' string '){ setting . render to=$(setting . render to))；} } else { return} var _ img _ org _=this . children(' img ')；_img_org_。css('光标'，'指针')；var _ _ w=0；var _ _ h=0；var __left=this.offset()。向左；var __top=this.offset()。顶部；if(this . offsetparent()){ _ _ left=this . offsetparent()。偏移量()。向左；__top=this.offsetParent()。偏移量()。顶部；} var _ move _ x=0；var _ move _ y=0；var _ val _ w=(setting . renderto . width()/2)；var _ val _ h=(setting . renderto . height()/2)；_img_org_。mouse over(function(){ setting . Renderto . html(' img src=' http : ' _ img _ org _)。attr(' src ')' ' style=' position : absolute；'id=' jniferrendertoimg '/')；setting . Renderto . show()；var timer=setInterval(function(){ _ _ w=$(' # jniferrendertoimg ')。width()/_img_org_。宽度()；_ _ h=$(' # jniferrendertoimg ')。height() /_img_org_。高度()；if(_ w0){ clearInterval(定时器)；} },100);});_img_org_。mouse out(function(){ setting . Renderto . hide()；});_img_org_。mousemove(函数(e){ _ move _ x=0-math . round((document . document element . scroll left e . clientx-_ _ left)* _ _ w-_ val _ w)；_ move _ y=0-math . round((document . document element . scroll top e . clienty-_ _ top)* _ _ h-_ val _ h)；$(' # jniferrendertoimg ')。css({'left':_move_x 'px '，' top ' : _ move _ y ' px ' })；});} })(jQuery)；调用方法：复制代码如下： $ ('# showpicturebox ')。jn magnifier({ render to : ' # showbipicturebox ' })；html复制代码的代码如下： div id=' showpicturebox ' img src=' http 3360 picture ' width=' 200 ' height=' 200 '/div div id=' showbipicturebox ' style=' position : absolute；飞越：隐藏；display:noneborder:3px固体# cccpadding:5px背景-repeat : no-repeat；背景-color : # fff；宽度width:300px高度：300 px；-在这里展示放大效果- /div注意：这里不使用两张图片，只使用一张图片，图片大，长宽一定要比放大效果div大！默认放大率是原始图片和显示缩略图之间的放大率。如果需要控制放大倍数，可以在“_img_org_”中手动设置图片对应的长度和宽度。鼠标悬停”事件。