| 本文实例为大家分享了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>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持wanshiok.com。
微信小程序实现吸顶效果的方法实例
vue实现带放大镜的搜索框 |
