Heim > Web-Frontend > js-Tutorial > jquery放大镜效果超漂亮噢_jquery

jquery放大镜效果超漂亮噢_jquery

WBOY
Freigeben: 2016-05-16 17:15:06
Original
1216 Leute haben es durchsucht

这个放大镜的代码挺简单滴效果也不错。

复制代码 代码如下:

<script> <BR>//QQ:496928838 微凉 <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: 360, <BR>layerborder: "#DDD", <BR>fade: true, <br><br>// 大图尺寸 <BR>largewidth: 960, <BR>largeheight: 720 <BR>}); <BR>}); <br><br></script>


jquery放大镜效果超漂亮噢_jquery
jquery放大镜效果超漂亮噢_jquery


jquery放大镜效果超漂亮噢_jquery 
jquery放大镜效果超漂亮噢_jquery
复制代码 代码如下:

/*
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:1280,largeheight:960};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("jquery放大镜效果超漂亮噢_jquery").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(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({enlarge:t})})(jQuery);

下载地址:http://pan.baidu.com/s/1zilrC
Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage