原生js实现电商商品图片放大镜效果

相信大家逛淘宝，京东等类似电商购物平台的时候往往会看到一些图片展示的效果，例如：把鼠标放在图片上右侧会出现一个放大的预览区域，这就是所谓放大镜效果，今天就教大家用js写一个类似放大镜效果。

需求分析鼠标移动到商品区域黄块区显示，同时右边的商品大图显示。

鼠标移动到商品区域黄块区显示，同时右边的商品大图显示。
黄块区随着鼠标的移动而移动并且商品大图也对应移动。
当鼠标移出黄块消失商品大图也消失。

思路

把需求拆成两部分来做
实现mask的移动
实现商品图片对应的移动

实现mask的移动

用maskX和maskY来记录mask的横纵坐标
maskX(Y)的限制条件

maskX(Y)实现正中间:maskX = maskX - mask.offsetHeight / 2; maskY = maskY - mask.offsetWidth / 2
maskX(Y)实现限制其上下左右的出范围移动:maskX = maskX > screen.offsetWidth - mask.offsetWidth ? screen.offsetWidth - mask .offsetWidth : maskX; maskY = maskY > screen.offsetHeight - mask.offsetHeight ? screen.offsetHeight - mask .offsetHeight : maskY;(不懂三目表达式的自行百度)

实现商品图片对应移动

商品移动要随着黄块的移动而移动，两者必然存在每种联系。黄块在的移动左边图片上的移动和右侧大图在右侧显示区的移动比例是相等的。

So =>mask移动的距离 / mask最大能够移动的距离 = 大图片移动的距离 / 大图片最大能够移动的距离

这下就好办多了
mask移动的距离,mask最大能够移动的距离,大图片最大能够移动的距离都是已知的，那么大图片移动的距离是可以求出来的

show the code

html

<div id="screen">
       <div class="smallImg">
           <img src="19.jpg" alt="small">
           <div class="mask"></div>
       </div>
       <div class="bigImg">
           <img src="19.jpg" alt="bigImg">
       </div>
</div>

css

* {
       margin: 0;
       padding: 0;
   }

   #screen {
       height: 400px;
       width: 400PX;
       margin: 60px auto;
       position: relative;
   }

   #screen>div {
       position: absolute;
   }

   .smallImg {
       width: 400px;
       height: 400px;
   }

   .smallImg img {
       width: 100%;
       height: 100%;
   }

   .mask {
       position: absolute;
       width: 100px;
       height: 100px;
       top: 0;
       left: 0;
       background: rgba(255, 255, 0, 0.4);
       display: none;
   }

   .bigImg {
       width: 400px;
       height: 400px;
       margin-left: 420px;
       overflow: hidden;
       display: none;
   }

   .bigImg img {
       width: 1600px;
       height: 1600px;
       position: absolute;
   }

JavaScript

window.onload = function () {
       // 选取元素
       let mask = document.querySelectorAll('.mask')[0];
       let screen = document.getElementById('screen');
       let smallImg = screen.children[0];
       let bigImg = screen.children[1];
       let bigImage = bigImg.children[0];

       screen.addEventListener('mouseover', function () {
           mask.style.display = 'block';
           bigImg.style.display = 'block';
       })

       screen.addEventListener('mouseout', function () {
           mask.style.display = 'none';
           bigImg.style.display = 'none';
       })
       screen.addEventListener('mousemove', function (ev) {
           let e = ev || event;

           //记录下鼠标移动时候mask的横纵坐标
           let maskX = e.pageX - screen.offsetLeft;
           let maskY = e.pageY - screen.offsetTop;
           maskX = maskX - mask.offsetHeight / 2;
           maskY = maskY - mask.offsetWidth / 2;

           //限制条件
           maskX = maskX < 0 ? 0 : maskX;
           maskY = maskY < 0 ? 0 : maskY;
           maskX = maskX > screen.offsetWidth - mask.offsetWidth ? screen.offsetWidth - mask
               .offsetWidth : maskX;
           maskY = maskY > screen.offsetHeight - mask.offsetHeight ? screen.offsetHeight - mask
               .offsetHeight :
               maskY;

           mask.style.left = maskX + 'px';
           mask.style.top = maskY + 'px';

           // mask移动的距离 / mask最大能够移动的距离  = 大图片移动的距离 / 大图片最大能够移动的距离
           let maskMax = screen.offsetWidth - mask.offsetWidth; 

           let bigImageMax = bigImage.offsetWidth - bigImg.offsetWidth; 

           let bigImageX = maskX * bigImageMax / maskMax; 

           let bigImageY = maskY * bigImageMax / maskMax; 
           bigImage.style.left = -bigImageX + 'px';
           bigImage.style.top = -bigImageY + 'px';
       })

   }