jquery放大镜效果超漂亮噢

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了jquery放大镜效果超漂亮噢，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2278字，纯文字阅读大概需要4分钟。

内容图文

<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> 

<a href="demo.jpg" id="demo" style="position: relative;float: left;"> 
<img src="demosmall.jpg" width="240" height="180"> 
<img src="demo.jpg" width="960" height="720" style="display: none;"> 
</a> 
 
 

 代码如下:

/* 
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("<div>").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("<img>").css({position:"absolute",display:"block",width:t.largewidth,height:t.largeheight});var s=e("<div>").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(t<0||t>i.innerWidth())return c();if(h<0||h>i.innerHeight())return c();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://pan.baidu.com/s/1zilrC
            
            


           
                
                                                

内容总结

以上是互联网集市为您收集整理的jquery放大镜效果超漂亮噢全部内容，希望文章能够帮你解决jquery放大镜效果超漂亮噢所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端