jqueryの虫眼鏡効果はとても美しい_jquery

この虫眼鏡のコードは非常にシンプルで、効果は良好です。

コードをコピー コードは次のとおりです。

<script>// QQ:496928838 Weiliang<br>$(function(){ <br>$("#demo").enlarge( <br>{ <br>// マウスマスクレイヤースタイル<br>シェードカラー: "#FFD24D", <br>shadeborder: "#FF8000", <br>shadeopacity: 0.4, <br>cursor: "move", <br><br>// 大きい画像の外側のスタイル<br>layerwidth: 480, <br>layerheight: 360 , <br>layerborder: "#DDD", <br>fade: true, <br><br>// 大きい画像サイズ<br>largewidth: 960, <br>largeheight: 720 <br>}); >}); <br><br></script>

コピーコード コードは次のとおりです:

/*

jQuery v1.0 用に拡大
Abel Yao、2013
*/
(function (e){var i={shadecolor:"#FFD24D",shadeborder:"#FF8000",shadeopacity:.5,cursor:"move",layerwidth:400,layerheight:300,layerborder:"#DDD" ,フェード: true,largewidth:1280,largeheight:960};var t=function(t){t=e.extend({},i,t);e(this).each(function(){var i= e(this ).css("position","re​​lative");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({ 位置:"絶対",左:"0px",トップ:"0px","背景色":t.shadecolor,border:"1px ソリッド " 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 ソリッド " 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(t ;i.innerWidth())return c();if(hi.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 ({拡大 :t})})(jQuery);


ダウンロード アドレス: http://pan.baidu.com/s/1zilrC