js实现图片放大镜效果——简单方法

女爷i 2022-08-29 05:45 355阅读 0赞

之前写过一篇关于电商项目商品详情页面的图片放大镜效果：电商项目商品详情页的图片放大效果实现：https://blog.csdn.net/yehaocheng520/article/details/119003274?spm=1001.2014.3001.5501

在这里插入图片描述
当时是在vue项目中使用的，其实跟在js中原理也是一样的。

实现图片放大镜效果的重点就是下面的这张图了：

在这里插入图片描述
上面的方法中，右侧图片，为了实现放大，使用的是background背景图片的设置原理，给background-size设置大于1的参数，就可以实现图片的放大效果了。

下面介绍另一种方法来实现图片放大镜的效果：个人感觉下面的方法更简单。

在这里插入图片描述

1.html部分代码——左右布局，左侧有图片+选择框，右侧有图片

  1. <div class="leftcon" id="left">
  2.     <img src="img/风景-1.jpg">
  3.     <div class="slide_box" id="box"></div>
  4. </div>
  5. <div class="rightcon" id="right">
  6.     <img src="img/风景-1.jpg">
  7. </div>

2.css部分——右侧大图直接设置width height百分比超过1，实现放大效果

  1. .leftcon{ 
  2.     width: 350px;
  3.     height: 350px;
  4.     margin: 100px 20px 0px 312px;
  5.     float: left;
  6.     position: relative;
  7.     box-shadow:3px 3px 10px 0 #111111; /*给图片施加阴影效果 */
  8.           -webkit-box-shadow: 3px 3px 10px 0 #111111;  /*兼容性处理*/
  9.           -moz-box-shadow: 3px 3px 10px 0 #111111;    
  10. }
  11. .leftcon img{ 
  12.     width: 100%;
  13.     height: 100%;
  14. }
  16. .leftcon .slide_box{ 
  17.     display:none;  /*将小方块盒子隐藏*/
  18.     position:absolute;  
  19.     top:0;  
  20.     left:0;  
  21.     width:175px;  
  22.     height:175px;  
  23.     background:#000;  
  24.     opacity: 0.3;  
  25.     cursor:move;  /*改变鼠标的形状*/
  26. }
  28. .rightcon{ 
  29.     display: none;  /*将右边div隐藏*/
  30.     width: 350px;
  31.     height: 350px;
  32.     margin-top: 100px;
  33.     float: left;
  34.     overflow: hidden;
  35.     position: relative;
  36. }
  38. .rightcon img{ 
  39.     width: 200%;
  40.     height: 200%;
  41.     position: absolute;
  42.     left: 0px;
  43.     top: 0px;
  44. }

3.js部分——关键部分

1.首先获取到几个关键的dom元素

  1. var leftone = document.getElementById('left');//获取左侧部分dom
  2. var rightone = document.getElementById('right');//获取右侧部分dom
  3. var box = documnent.getElementById('box');//获取选择框dom
  4. var rimg = rightone.getElementsByTagName('img')[0];//获取右侧部分中的img数组的第一个

2.需要用到的参数——关于浏览器界面的参数

  1. 浏览器点击事件传递的事件源是event,代表对象的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态，event是window的一个属性

event || window.event:就是事件源对象，这样写是为了兼容IE浏览器
在这里插入图片描述
根据上面的图片，我们可以看到几个相关的参数：
e.pageY:鼠标点击处距离页面最顶部的距离
e.pageX:鼠标点击处距离页面最左边的距离
oAppTop:就是左侧图片距离页面顶部的距离：也就是当前案例中的leftone.offsetTop
oAppLeft:就是左侧图片距离页面左边的距离：也就是当前案例中的leftone.offsetLeft
height:就是选择框的高度：也就是当前案例中的box.offsetHeight
width:就是选择框的宽度：也就是当前案例中的box.offsetWidth

通过上面的分析，可以得出：选择框的位置left top的大小：
var top = e.pageY - leftone.offsetTop - box.offsetHeight/2;
var left = e.pageX - leftone.offsetLeft - box.offsetWidth/2;

3.计算选择框出现的边界范围——因为选择框是相对于左侧图片的，因此最小值是0

var maxtop = leftone.offsetHeight - box.offsetHeight;//选择框的最大top值
var maxleft = leftone.offsetWidth - box.offsetWidth;//选择框的最大left值
var mintop = 0;//选择框的最小top值
var minleft = 0;//选择框的最小left值

4.判断选择框的边界范围

代码分析：

  1. top是鼠标到浏览器的垂直距离减去左边div顶部到浏览器的垂直距离减去选择框的高度的一半，那么现在鼠标在选择框的中心，也就是说，top就等于选择框的顶部到左边的div的垂直距离，那么，如果top<0,就是说选择框和左边的div顶部重合，就让选择框的top值为0，即鼠标继续向上移动，选择框不再移动，从而让选择框的移动范围不能超过左边div的宽高范围
  3. if(top < mintop){ 
  4.     box.style.top = mintop + "px";
  5.     mvtop = mintop;
  6. }else if(top>maxtop){ 
  7.     box.style.top = maxtop+'px';
  8.     mvtop = maxtop;
  9. }else{ 
  10.     box.style.top = top +'px';
  11.     mvtop = top;
  12. }
  14. if(left < minleft){ 
  15.     box.style.left = minleft + "px";
  16.     mvleft = minleft;
  17. }else if(left > maxleft){ 
  18.     box.style.left = maxleft + "px";
  19.     mvleft = maxleft;
  20. }else{ 
  21.     box.style.left = left + 'px';
  22.     mvleft = left;
  23. }

5.给右侧大图的位置赋值

rimg.style.top = -mvtop*2+‘px’
rimg.style.left = -mvleft*2+'px'

6.监听鼠标移动的事件——onmouseomve和onmouseleave

鼠标移动效果

  1. leftone.onmousemove = function(e){ 
  2.     var e = e||window.event;//判断事件源
  3.     box.style.display = 'block';
  4.     getPosition(e);//这个就是移动鼠标改变右侧图片位置的方法
  5.     rightone.style.display = 'block';
  6. }

鼠标移出效果

  1. leftone.onmouseleave = function(e){ 
  2.     var e = e||window.event;//判断事件源
  3.     box.style.display = 'none';
  4.     rightone.style.display = 'none';
  5. }

完整html代码如下

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8" />
  6.     <link rel="icon" href="img/favicon.ico" type="img/x-ico" />
  7.     <title>Image Magnifying Glass</title>
  8.     <!-- 放大镜的原理: 左边图片100%显示，右边图片200%显示并定位，定义两个图片框，将图片放入，图片超出相框部分隐藏，移动滑块，根据滑块的位置，计算出右边图片的定位，从而形成映射效果，即图片放大镜 -->
  9.     <style type="text/css">
  10.         body { 
  11.             margin: 0px;
  12.             padding: 0px;
  13.         }
  15.         img { 
  16.             /* display: block; */
  17.         }
  19.         .leftcon { 
  20.             width: 350px;
  21.             height: 350px;
  22.             margin: 100px 20px 0px 312px;
  23.             float: left;
  24.             position: relative;
  25.             box-shadow: 3px 3px 10px 0 #111111;
  26.             /*给图片施加阴影效果 */
  27.             -webkit-box-shadow: 3px 3px 10px 0 #111111;
  28.             /*兼容性处理*/
  29.             -moz-box-shadow: 3px 3px 10px 0 #111111;
  30.         }
  32.         .leftcon img { 
  33.             width: 100%;
  34.             height: 100%;
  35.         }
  37.         .leftcon .slide_box { 
  38.             display: none;
  39.             /*将小方块盒子隐藏*/
  40.             position: absolute;
  41.             top: 0;
  42.             left: 0;
  43.             width: 175px;
  44.             height: 175px;
  45.             background: #000;
  46.             opacity: 0.3;
  47.             cursor: move;
  48.             /*改变鼠标的形状*/
  49.         }
  51.         .rightcon { 
  52.             display: none;
  53.             /*将右边div隐藏*/
  54.             width: 350px;
  55.             height: 350px;
  56.             margin-top: 100px;
  57.             float: left;
  58.             overflow: hidden;
  59.             position: relative;
  60.         }
  62.         .rightcon img { 
  63.             width: 200%;
  64.             height: 200%;
  65.             position: absolute;
  66.             left: 0px;
  67.             top: 0px;
  68.         }
  69.     </style>
  70. </head>
  72. <body>
  73.     <div class="leftcon" id="left">
  74.         <img src="img/风景-1.jpg" />
  75.         <div class="slide_box" id="box"></div>
  76.     </div>
  77.     <div class="rightcon" id="right">
  78.         <img src="img/风景-1.jpg" />
  79.     </div>
  80. </body>
  81. <script>
  82.     var leftone = document.getElementById("left");
  83.     var rightone = document.getElementById("right");
  84.     var box = document.getElementById("box");
  85.     var rimg = rightone.getElementsByTagName("img")[0];
  86.     // Event是获取事件对象，对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态,envet是windows的一个属性。
  87.     // 放大镜实现方法（获取右边图片定位）
  88.     function getPosition(e) { 
  89.         //这里的参数e就是代表event
  90.         //首先我们要去判断事件源,获取事件源,也就是e
  91.         var e = e || window.event; //实现兼容
  92.         //理解：
  93.         //这个表达式写全是这样：var e=event?event||window.event;
  94.         //如果存在event,那么var e=event;而如果不存在event，那么var e=window.event.那么可以看出确实能实现兼容
  96.         var top = e.clientY - leftone.offsetTop - box.offsetHeight / 2;
  97.         var left = e.clientX - leftone.offsetLeft - box.offsetWidth / 2;
  98.         //理解：
  99.         //e.clientY:返回事件触发时鼠标相对于元素视口的Y坐标。
  100.         //e.clientX:返回事件触发时鼠标相对于元素视口的X坐标。
  101.         //这里的元素视口实际上代指就是浏览器，clientX是鼠标距离浏览器左边框的距离，clientY是鼠标距离浏览器上边框的距离。
  102.         //offsetTop获取对象相对于版面或由offsetTop属性指定的父坐标的计算顶端位置。这里就是左边的div相对于body即浏览器窗口的纵向距离
  103.         //offsetLeft获取对象相对于版面或由offsetLeft属性指定的父坐标的计算顶端位置。这里就是左边的div相对于body即浏览器窗口的纵横向距离
  104.         //offsetHeight是对象的可见高度。这里是指小滑块的高度
  105.         //offsetHeight是对象的可见宽度。这里是指小滑块的宽度
  106.         //这里为什么除以2?是因为我们不除以2的话,事件源也就是鼠标就在这个小滑块的的右下角,并不美观
  107.         //我们要让鼠标位于滑块的中心,所以宽高各减去一半
  109.         //边界判断
  110.         var maxtop = leftone.offsetHeight - box.offsetHeight; //获取小滑块最大纵向移动距离
  111.         var maxleft = leftone.offsetWidth - box.offsetWidth; //获取小滑块最大横向移动距离
  112.         var mintop = 0; //获取小滑块最小纵向移动距离
  113.         var minleft = 0; //获取小滑块最大纵向移动距离
  114.         var mvtop; //定义小滑块的纵向移动距离
  115.         var mvleft; //定义小滑块的横向移动距离
  116.         // 判断
  117.         if (top < mintop) { 
  118.             box.style.top = mintop + "px";
  119.             mvtop = mintop;
  120.             //理解：
  121.             //top是鼠标到浏览器的垂直距离-左边div顶部到浏览器的垂直距离-小滑块的高度的一半。那么现在鼠标在小滑块的中心，也就是说，top就等于小滑块的顶部到左边div的垂直距离
  122.             //那么，如果top<0,就是说小滑块和左边div顶部重合，就让小滑块的top值为0，即鼠标继续向上移动，小滑块不在移动，从而让小滑块的移动范围不能超过左边div的宽高范围
  123.             //下方同理
  124.         } else if (top > maxtop) { 
  125.             box.style.top = maxtop + "px";
  126.             mvtop = maxtop;
  127.             //如果top>maxtop,就是说小滑块和左边div底部重合，就让小滑块的top值为maxtop，即鼠标继续向下移动，小滑块不在移动，从而让小滑块的移动范围不能超过左边div的宽高范围
  128.         } else { 
  129.             box.style.top = top + "px";
  130.             mvtop = top;
  131.             //不超过边界，则小滑块的垂直移动距离就等于top,即小滑块的顶部到左边div的垂直距离
  132.         }
  133.         if (left < minleft) { 
  134.             box.style.left = minleft + "px";
  135.             mvleft = minleft;
  136.         } else if (left > maxleft) { 
  137.             box.style.left = maxleft + "px";
  138.             mvleft = maxleft;
  139.         } else { 
  140.             box.style.left = left + "px";
  141.             mvleft = left;
  142.         }
  143.         //因为右边div的图片是左边div的图片的两倍,而左边div和右边div都是小滑块的宽高的两倍，而要让右边div放大左边的小滑块的包围图片，所以右边大图的定位坐标是小滑块的两倍，这样才能进行映射
  144.         //右侧图片跟着运动:左侧小滑块移动多少，右侧跟着移动他的2倍即可
  145.         rimg.style.top = -mvtop * 2 + "px";
  146.         rimg.style.left = -mvleft * 2 + "px";
  147.     }
  149.     // 左侧盒子鼠标移入，小滑块和右侧图片显示,衔接鼠标移动效果
  150.     //onmouseenter 事件类似于 onmouseover 事件。 唯一的区别是 onmouseenter 事件不支持冒泡。
  151.     //该事件通常与 onmouseleave 事件一同使用。
  152.     // leftone.onmouseenter = function(e){ 
  153.     // var e=e||window.event; //判断事件源
  154.     // box.style.display = "block";
  155.     // getPosition(e);
  156.     // rightone.style.display = "block";
  157.     // }
  159.     //鼠标移动效果
  160.     leftone.onmousemove = function(e) { 
  161.         var e = e || window.event; //判断事件源
  162.         box.style.display = "block";
  163.         getPosition(e);
  164.         rightone.style.display = "block";
  165.     };
  167.     //鼠标移出效果
  168.     leftone.onmouseleave = function(e) { 
  169.         var e = e || window.event; //判断事件源
  170.         box.style.display = "none";
  171.         rightone.style.display = "none";
  172.     };
  173. </script>
  174. </html>

发表评论

表情：
评论列表 （有 0 条评论，355人围观）

还没有评论，来说两句吧...

相关阅读

    相关 原生js实现放大镜效果

    今天是中秋佳节，在这了我祝大家中秋快乐，心想事成，工作顺利哈！ 放大镜效果在电商网站上较为常见的 一个效果，主要针对鼠标在图片选取部分放大查看。效果如图所示 ![...

    痛定思痛。痛定思痛。/ 0 赞/ 169 阅读

    相关 js实现购物网站放大镜效果

    > 在一些主流的购物网站上，我们经常能看到一些带有放大镜效果的图片框，看似神奇，指哪哪大，其实实现的原理很简单 主要原理：实现放大镜的核心是需要有三套大小不同，形状相同的图片

    亦凉亦凉/ 0 赞/ 384 阅读