jquery放大鏡效果超美噢_jquery

這個放大鏡的程式碼挺簡單滴效果也不錯。

複製程式碼 程式碼如下:

<script> <BR>//QQ:496928888328888涼<BR>$(function(){ <BR>$("#demo").enlarge( <BR>{ <BR>// 滑鼠遮罩層樣式<BR>shadecolor: "#FFD24D", <BR> shadeborder: "#FF8000", <BR>shadeopacity: 0.4, <BR>cursor: "move", <br><br>// 大圖外層樣式<BR>layerwidth: 480, <BR>layerheight <BR>layerborder: "#DDD", <BR>fade: true, <br><br>// 大圖尺寸<BR>largewidth: 960, <BR>largeheight: 720 <BR>}) <BR>}; }); <br><br></script>

 

複製代碼 程式碼如下:

/*
Enlarge for jQuery v1.0
Abel Yao, 2013
*/
(function(e){var i={shadecolor :"#FFD24D",shadeborder:"#FF8000",shadeopacity:.5,cursor:"move",layerwidth:400,layerheight:300,layerborder:"#DDD",fade:true,largewidth:300,layerborder:"#DDD",fade:true,largewidth:1280,largeheight:1280,largeheight:1280,largeheight:1280,large };var t=function(t){t=e.extend({},i,t);e(this).each(function(){var i=e(this).css("position"," relative");var h=i.children().first();var r={x:h.width()/t.largewidth,y:h.height()/t.largeheight};var o={ shade:{width:t.layerwidth*r.x-2,height:t.layerheight*r.y-2}};var a=e("

").css({position:"absolute",left:"0px ",top:"0px","background-color":t.shadecolor,border:"1px solid " t.shadeborder,width:o.shade.width,height:o.shade.height,opacity:t.shadeopacity, cursor:t.cursor});a.hide().appendTo(i);var d=e("").css({position:"absolute",display:"block",width:t. largewidth,height:t.largeheight});var s=e("

").css({position:"absolute",left:i.width() 5,top:0,"background-color": "#111",overflow:"hidden",width:t.layerwidth,height:t.layerheight,border:"1px solid " t.layerborder});d.attr("src",i.attr("href" ));d.appendTo(s);s.hide().appendTo(i);var n={x:o.shade.width/2,y:o.shade.height/2};var l={ width:i.innerWidth()-a.outerWidth(),height:i.innerHeight()-a.outerHeight()};var g=function(){a.show();if(t.fade)s. stop().fadeIn(300);else s.show()};var c=function(){a.hide();s.hide()};var f=i.offset();i.mousemove( function(e){var t=e.pageX-f.left;var h=e.pageY-f.top;if(ti.innerWidth())return c();if(h i.innerHeight())return c();t=t-n.x;h=h-n.y;if(tl.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://pan.baidu.com/s/1zilrC