首页 > web前端 > js教程 > 正文

jquery放大镜效果超漂亮噢_jquery

php中文网
发布: 2016-05-16 17:15:06
原创
1382人浏览过

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

星火绘镜
星火绘镜

星火绘镜是科大讯飞推出的一个AI短视频创作平台,可以帮助用户进行AI短剧、AI预告片、MV创作

星火绘镜 29
查看详情 星火绘镜
复制代码 代码如下:

<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
相关标签:
最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门推荐
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号