玩转JQuery来实现放大镜效果

程序员文章站 2022-03-22 10:40:16

目前流行的放大镜效果，在很多企业网站以及一些商城网站被广泛使用，下面我们一起看看如何来实现它吧，精彩继续，敬请期待~ Document...</div> <div class="content"> 目前流行的放大镜效果，在很多企业网站以及一些商城网站被广泛使用，下面我们一起看看如何来实现它吧，精彩继续，敬请期待~ <pre><code class="prism language-javascript"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="./jquery.js"></script> <style> *{ margin: 0; padding: 0; } #small{ width: 500px; height: 500px; border: 1px red solid; position: relative; } #small img{ width: 500px; height: 500px; } #big{ width: 500px; height: 500px; border: 1px red solid; /* 滚动条自动溢出隐藏 */ /* overflow: auto; */ overflow: hidden; margin-left: 10px; } #big img{ width: 1000px; height: 1000px; } #box{ display: flex; } /* 遮罩层样式 */ #mask{ width: 150px; height: 150px; background: rgba(0, 0, 0, 0.3); position: absolute; top: 0; left: 0; display: none; } </style> </head> <body> <div id="box"> <div id="small"> <img src="./1.jpg" alt=""> <div id="mask"></div> </div> <div id="big"> <img src="./1.jpg" alt=""> </div> </div> <script> //遮罩层 $("#small").mouseenter(function(){ $("#mask,#big").show() }).mouseleave(function(){ $("#mask,#big").hide() }) $("#small").mousemove(function(e){ //计算遮罩层的变量 var x=e.pageX-$("#small").offset().left-$("#mask").width()/2; var y=e.pageY-$("#small").offset().top-$("#mask").height()/2; //设置最小限制 x<0?x=0:x; y<0?y=0:y; //设置最大限制 x>$("#small").width()-$("#mask").width()?x=$("#small").width()-$("#mask").width():$("#small").width()-$("#mask").width(); y>$("#small").height()-$("#mask").height()?y=$("#small").height()-$("#mask").height():$("#small").height()-$("#mask").height(); $("#mask").css({ left:x+"px", top:y+"px" }) //计算小盒子和大图片的比例 var bilix=$("#big img").width()/$("#small").width(); var biliy=$("#big img").height()/$("#small").height(); //根据遮罩层的top和left 来滚动大盒子的scrollTop和scrollLeft $("#big").scrollLeft(x*bilix); $("#big").scrollTop(y*biliy); }) </script> </body> </html> </code></pre> 本文地址：https://blog.csdn.net/weixin_53587096/article/details/112054003 </div> <div class="tags"> 相关标签： <a href="/t/javascript/" target="_blank"> javascript </a> </div> <div class="info-pre-next"> 上一篇： <a href="/article/282339.html"> 历史上多尔衮为何不自己当皇帝？真相是什么 </a> 下一篇： <a href="/article/282341.html"> jQuery中全选按钮的练习 </a> </div> <div class="wz_tuijian"> 推荐阅读 <ul> <li> <a href="/article/2314127.html" target="_blank" title="jQuery向下滚动即时加载内容实现的瀑布流效果_PHP"> <h2> jQuery向下滚动即时加载内容实现的瀑布流效果_PHP </h2> </a> </li> <li> <a href="/article/2307506.html" target="_blank" title="一个jquery实现的不错的多行文字图片滚动效果_jquery"> <h2> 一个jquery实现的不错的多行文字图片滚动效果_jquery </h2> </a> </li> <li> <a href="/article/2306567.html" target="_blank" title="jQuery实现图片上传预览效果功能完整实例【测试可用】"> <h2> jQuery实现图片上传预览效果功能完整实例【测试可用】 </h2> </a> </li> <li> <a href="/article/2306329.html" target="_blank" title="使用JQuery实现图片轮播效果"> <h2> 使用JQuery实现图片轮播效果 </h2> </a> </li> <li> <a href="/article/2305786.html" target="_blank" title="jQuery实现炫丽的3d旋转星空效果"> <h2> jQuery实现炫丽的3d旋转星空效果 </h2> </a> </li> <li> <a href="/article/2305140.html" target="_blank" title="使用jquery实现图文切换效果另加特效_jquery"> <h2> 使用jquery实现图文切换效果另加特效_jquery </h2> </a> </li> <li> <a href="/article/2301093.html" target="_blank" title="基于jQuery实现的菜单切换效果_jquery"> <h2> 基于jQuery实现的菜单切换效果_jquery </h2> </a> </li> <li> <a href="/article/2299724.html" target="_blank" title="jquery animate实现鼠标放上去显示离开隐藏效果"> <h2> jquery animate实现鼠标放上去显示离开隐藏效果 </h2> </a> </li> <li> <a href="/article/2299412.html" target="_blank" title="用jquery中插件dialog实现弹框效果实例代码"> <h2> 用jquery中插件dialog实现弹框效果实例代码 </h2> </a> </li> <li> <a href="/article/2296998.html" target="_blank" title="jQuery实现的进度条效果_jquery"> <h2> jQuery实现的进度条效果_jquery </h2> </a> </li> </ul> </div> </article> </div> </main> <footer><div class="box"><div class="ft_nav"><div class="ft_about">关于网站<ul><li><a href="/sitemap.xml" target="_blank" title="网站地图">网站地图</a></li><li><a href="/list/2/" title="最新程序员文章站">最新程序员文章站</a></li></ul></div><div class="ft_contact"><ul><li>本站所有数据收集于网络如有侵犯到您的权益，请联系我们进行下架处理。</li><li class="email_show"></li></ul></div></div><div class="copyright"><div class="cr_left"> 备案号：<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">粤ICP备20058927号</a>© Copyright © 2020-2022 www.superweb999.com 程序员文章站. </div></div></div></footer> </body> </html>