jquery自定义放大镜效果
更新时间:2021年08月18日 10:55:57 作者:月疯
这篇文章主要为大家详细介绍了jquery自定义放大镜效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了jquery自定义放大镜效果的具体代码,供大家参考,具体内容如下
jquery定义插件:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/jquery3.6.0.js"></script> <style type="text/css"> div{ width: 200px; height: 200px; } </style> </head> <body> <div></div> <div></div> <script> // 1、jquery的插件,定义在jquery.fn的基础上的 // 2、命名冲突的解决 // 3、循环jquery对象中的每个元素 // 4、在函数中,将jquery返回(this) (function($){ $.fn.extend({ randomColor:function(){ // this指向的就是我们通过$选择器选取到的所有元素组成的伪数组 function random(){ var r=Math.floor(Math.random()*256); var g=Math.floor(Math.random()*256); var b=Math.floor(Math.random()*256); return 'rgb('+ r +','+ g +','+ b +')'; } this.each(function(index){ $(this).css({ backgroundColor:random() }) }) return this; } }) })(jQuery); $('div').randomColor(); </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } .magnifier .left{ width: 240px; height: 150px; float: left; position: relative; } .magnifier .left img{ width: 240px; height: 150px; } .magnifier .left .mask{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; background-color: black; opacity: 0.4; } .magnifier .float{ width: 50px; height: 50px; background: hotpink; opacity: 0.5; position: absolute; left: 0; top: 0; } .magnifier .right{ height: 200px; width: 200px; background-image: url(img/2.jpg) ; float: left; margin-left: 50px; } </style> </head> <body> <div class="magnifier"> <div class="left"> <img src="./img/2.jpg" > <div class="float"> </div> <div class="mask"></div> </div> <div class="right"></div> </div> <script src="js/jquery3.6.0.js"></script> <script> (function($){ $.fn.extend({ magnifier:function(){ this.each(function(){ var that=this; $('.left',this).mousemove(function (evt){ var x=evt.offsetX; var y=evt.offsetY; var float=$('.float',this); x=x-float.width/2; y=y-float.height/2; if(x<0){ x=0; } if(y<0){ y=0; } if(x > $(this).width()-float.width()){ x = $(this).width()-float.width(); } if(y > $(this).height()-float.height()){ y = $(this).height()-float.height(); } float.css({ left:x, top:y }); $('.right',that).css({ backgroundPosition:x*-4+'px' + y*-4+'px' }) }).mouseover(function(){ }).mouseout(function(){ }) }); } }) })(jQuery) $('.magnifier').magnifier(); </script> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
web的各种前端打印方法之jquery打印插件jqprint实现网页打印
本文介绍JQuery插件Jqprint实现网页打印,不懂的同学正可借此机会学习下,以备不时之需,话不多说,切入主题2013-01-01jQuery源码分析-04 选择器-Sizzle-工作原理分析
在分析Sizzle源码之前,先整理一下选择器的工作原理,先明确一些选择器中用到的名词,后边阅读时不会有歧义2011-11-11jQuery ui autocomplete选择列表被Bootstrap模态窗遮挡的完美解决方法
这篇文章主要介绍了jQuery ui autocomplete选择列表被Bootstrap模态窗遮挡的完美解决方法,本文介绍的非常详细,解决过程思路明了,需要的朋友可以参考下2016-09-09jQuery插件FusionCharts绘制的2D双柱状图效果示例【附demo源码】
这篇文章主要介绍了jQuery插件FusionCharts绘制的2D双柱状图效果,结合实例形式分析了jQuery使用FusionCharts插件绘制2D双柱状图的具体步骤与相关操作技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下2017-05-05
最新评论