今天和大家一起聊聊用原生js实现电商界面的放大镜效果

需求：当鼠标在左侧大图滑动的时候，大图内会出现一个div遮罩层，且遮罩层能随着鼠标箭头的移动而移动。鼠标滑过右边小图的时候，左边的大图也会随之切换。html、css代码较多，有需要的可以私我。先上图：

这个是鼠标滑过之前的状态：

这个是鼠标滑过时的状态：

写代码之前，先将总体需求拆解下：

1. 鼠标滑过右侧小图时，小图有高亮显示，且左侧的大图会随着小图的变化而切换
2. 鼠标滑过左侧大图，会出现半透明遮罩层且其位置为：left:0; top: 0,鼠标移出左侧大图，遮罩层会消失
3. 将鼠标的坐标绑定到遮罩层的left和top值，使得鼠标移动的时候，遮罩层也随着移动
4. 限定遮罩层的移动范围，使其不移出大图之外
5. 将鼠标移动的坐标通过backgroundPosition属性将右侧大图绑定起来，已达到遮罩层滑动左侧大图时，右侧大图随之做出对应展示

接下来上代码：

//鼠标滑过右侧小图时，小图有高亮显示，且左侧的大图会随着小图的变化而切换
   small.addEventListener("mouseover", function (e) {
    let target = e.target;
    if (target.tagName === "IMG") {
      document.querySelector(".small .active").classList.remove("active");
      target.classList.add("active");
      middle.querySelector("img").src = target.src;
      big.style.backgroundImage = `url(${target.src})`;
    }
  });
  
//鼠标滑过中间图遮罩显示
  middle.addEventListener("mouseover", function () {
    layer.style.display = "block";
    big.style.display = "block";
  });
  
//将鼠标的坐标绑定到遮罩层的left和top值，使得鼠标移动的时候，遮罩层也随着移动
middle.addEventListener("mousemove", function (e) {
    let x = e.offsetX - layer.offsetWidth / 2;
    let y = e.offsetY - layer.offsetHeight / 2;

//限定遮罩层的移动范围，使其不移出大图之外
    x = x < 0 ? 0 : x;
    y = y < 0 ? 0 : y;
    x = x > 200 ? 200 : x;
    y = y > 200 ? 200 : y;

    layer.style.left = x + "px";
    layer.style.top = y + "px";

//将鼠标移动的坐标通过backgroundPosition属性将右侧大图绑定起来，已达到遮罩层滑动左侧大图时，右侧大图随之做出对应展示
    big.style.backgroundPosition = `${-2 * x}px ${-2 * y}px`;
  });
  
  
//鼠标滑出中间图遮罩隐藏
  middle.addEventListener("mouseout", function () {
    layer.style.display = "none";
    big.style.display = "none";
  });

js的核心代码就是这些，想要完整版案例的小伙伴可以私聊我~ 大家觉得这些代码有哪些地方可以优化呢？评论区讨论~