玩转JQuery来实现放大镜效果

程序员文章站 2022-06-19 15:28:19

目前流行的放大镜效果，在很多企业网站以及一些商城网站被广泛使用，下面我们一起看看如何来实现它吧，精彩继续，敬请期待~ 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/1454745.html"> HashSet集合保证元素唯一性的源码分析 </a> 下一篇： <a href="/article/1454747.html"> 佳能单反相机70D闪光灯怎么关闭? </a> </div> <div class="wz_tuijian"> 推荐阅读 <ul> <li> <a href="/article/2084155.html" target="_blank" title="vue+jquery+lodash实现滑动时顶部悬浮固定效果"> <h2> vue+jquery+lodash实现滑动时顶部悬浮固定效果 </h2> </a> </li> <li> <a href="/article/2083788.html" target="_blank" title="JavaScript实现京东购物放大镜和选项卡效果的方法分析"> <h2> JavaScript实现京东购物放大镜和选项卡效果的方法分析 </h2> </a> </li> <li> <a href="/article/2083189.html" target="_blank" title="jquery单行文字向上滚动效果的实现代码"> <h2> jquery单行文字向上滚动效果的实现代码 </h2> </a> </li> <li> <a href="/article/2083146.html" target="_blank" title="JavaScript编程开发中如何使用jquery实现放大镜效果"> <h2> JavaScript编程开发中如何使用jquery实现放大镜效果 </h2> </a> </li> <li> <a href="/article/2081629.html" target="_blank" title="JavaScript编程开发中jquery搜索框效果实现方法"> <h2> JavaScript编程开发中jquery搜索框效果实现方法 </h2> </a> </li> <li> <a href="/article/2081627.html" target="_blank" title="基于jQuery实现的打字机效果"> <h2> 基于jQuery实现的打字机效果 </h2> </a> </li> <li> <a href="/article/2081244.html" target="_blank" title="2种jQuery 实现刮刮卡效果"> <h2> 2种jQuery 实现刮刮卡效果 </h2> </a> </li> <li> <a href="/article/2081231.html" target="_blank" title="jQuery实现带滚动线条导航效果的方法教程"> <h2> jQuery实现带滚动线条导航效果的方法教程 </h2> </a> </li> <li> <a href="/article/2079172.html" target="_blank" title="jQuery轻松实现无缝轮播效果"> <h2> jQuery轻松实现无缝轮播效果 </h2> </a> </li> <li> <a href="/article/2076933.html" target="_blank" title="Jquery的Tabs内容轮换效果实现代码"> <h2> Jquery的Tabs内容轮换效果实现代码 </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>