jQuery 图片放大预览插件
这个放大镜的代码挺简单滴效果也不错。
- <script>
- //QQ:496928838微凉
- $(function(){
- $("#demo").enlarge(
- {
- //鼠标遮罩层样式
- shadecolor:"#FFD24D",
- shadeborder:"#FF8000",
- shadeopacity:0.4,
- cursor:"move",
- //大图外层样式
- layerwidth:480,
- layerheight:360,
- layerborder:"#DDD",
- fade:true,
- //大图尺寸
- largewidth:960,
- largeheight:720
- });
- });
- </script>
- <ahref="demo.jpg"id="demo"style="position:relative;float:left;">
- <imgsrc="demosmall.jpg"width="240"height="180">
- <imgsrc="demo.jpg"width="960"height="720"style="display:none;">
- </a>
- /*
- EnlargeforjQueryv1.0
- AbelYao,2013
- */
- (function(e){vari={shadecolor:"#FFD24D",shadeborder:"#FF8000",shadeopacity:.5,cursor:"move",layerwidth:400,layerheight:300,layerborder:"#DDD",fade:true,largewidth:1280,largeheight:960};vart=function(t){t=e.extend({},i,t);e(this).each(function(){vari=e(this).css("position","relative");varh=i.children().first();varr={x:h.width()/t.largewidth,y:h.height()/t.largeheight};varo={shade:{width:t.layerwidth*r.x-2,height:t.layerheight*r.y-2}};vara=e("<div>").css({position:"absolute",left:"0px",top:"0px","background-color":t.shadecolor,border:"1pxsolid"+t.shadeborder,width:o.shade.width,height:o.shade.height,opacity:t.shadeopacity,cursor:t.cursor});a.hide().appendTo(i);vard=e("<img>").css({position:"absolute",display:"block",width:t.largewidth,height:t.largeheight});vars=e("<div>").css({position:"absolute",left:i.width()+5,top:0,"background-color":"#111",overflow:"hidden",width:t.layerwidth,height:t.layerheight,border:"1pxsolid"+t.layerborder});d.attr("src",i.attr("href"));d.appendTo(s);s.hide().appendTo(i);varn={x:o.shade.width/2,y:o.shade.height/2};varl={width:i.innerWidth()-a.outerWidth(),height:i.innerHeight()-a.outerHeight()};varg=function(){a.show();if(t.fade)s.stop().fadeIn(300);elses.show()};varc=function(){a.hide();s.hide()};varf=i.offset();i.mousemove(function(e){vart=e.pageX-f.left;varh=e.pageY-f.top;if(t<0||t>i.innerWidth())returnc();if(h<0||h>i.innerHeight())returnc();t=t-n.x;h=h-n.y;if(t<0)t=0;if(h<0)h=0;if(t>l.width)t=l.width;if(h>l.height)h=l.height;a.css({left:t,top:h});d.css({left:0-t/r.x,top:0-h/r.y})}).mouseenter(g).mouseleave(c)})};e.fn.extend({enlarge:t})})(jQuery);
下载地址:http://files.cnblogs.com/web100/%E5%9B%BE%E7%89%87%E6%94%BE%E5%A4%A7%E9%95%9C.zip