实现放大镜效果详解 JS+CSS

思路：
实现放大镜功能有三个模块

1. 左侧黄色框是放大镜，右侧是图片的放大后的效果。当鼠标移动到左侧图片上时，放大镜和右侧的大图显示
2. 鼠标移动，放大镜也进行移动，此时获取鼠标的坐标进行控制放大镜，并设置移动的范围
3. 当移动放大镜时，右侧放大效果图也进行移动

HTML代码：

<div class="box">
    <img class="preImg" src="images/3.jpg" alt="">
    <div class="mask"></div>
    <div class="bigPic">
        <img class="bigImg" src="images/3.jpg" alt="">
    </div>
</div>

CSS代码:

* {
     padding: 0;
      margin: 0;
  }
  
  .box {
      position: relative;
      width: 400px;
      height: 400px;
      margin: 200px 0 0 200px;
  }
  
  .preImg {
      width: 100%;
      height: 100%;
  }
  
  .bigPic {
      position: absolute;
      left: 410px;
      top: 0;
      width: 800px;
      height: 600px;
      border: 1px solid #ccc;
      overflow: hidden;
  }
  
  .bigImg {
      position: absolute;
      left: 0;
      top: 0;
      width: 1000px;
      height: 800px;
  }
  
  .mask {
      position: absolute;
      top: 0;
      left: 0;
      width: 150px;
      height: 150px;
      background-color: rgb(132, 149, 243);
      opacity: .3;
      cursor: move;
  }

JS 代码：

// 获取相关元素
        var box = document.querySelector('.box');
        var preImg = document.querySelector('.preImg');
        var mask = document.querySelector('.mask');
        var bigPic = document.querySelector('.bigPic');
        var bigImg = document.querySelector('.bigImg');

        // (1)- 实现显示隐藏
        box.addEventListener('mouseover', function() {
            mask.style.display = 'block';
            bigPic.style.display = 'block';
        });
        box.addEventListener('mouseout', function() {
            mask.style.display = 'none';
            bigPic.style.display = 'none';
        })

        // (2)- 鼠标移动事件
        box.addEventListener('mousemove', function(e) {
            // (3)- 获取鼠标位置
            var x = e.pageX - this.offsetLeft;
            var y = e.pageY - this.offsetTop;
            // console.log(x, y);
            // (4)- 放大镜移动位置，鼠标放在放大镜中间
            var maskX = x - mask.offsetWidth / 2;
            var maskY = y - mask.offsetHeight / 2;

            // (5)- 限制放大镜的移动范围
            // 判断，当放大镜的最左边为0，放大镜移的最大距离就是盒子的宽度 - 放大镜的宽度
            // 同理，放大镜的上下移动
            var maskMaxX = this.offsetWidth - mask.offsetWidth;
            var maskMaxY = this.offsetHeight - mask.offsetHeight;

            if (maskX <= 0) {
                maskX = 0;
            } else if (maskX > maskMaxX) {
                maskX = maskMaxX;
            };
            if (maskY <= 0) {
                maskY = 0;
            } else if (maskY > maskMaxY) {
                maskY = maskMaxY;
            }

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

            // (6)- 效果图片
            // 练习效果图片需要一个比例公式： 放大镜移动距离 / 放大镜移动最大距离 = 效果图的图片移动距离 / 效果图的图片移动最大距离
            // 效果图的图片最大距离 = 效果图宽高 - 效果图的图片的宽高
            // 求 效果图的图片最大距离
            bigPicMaxX = bigImg.offsetWidth - bigPic.offsetWidth;
            bigPicMaxY = bigImg.offsetHeight - bigPic.offsetHeight;
            var bigImgX = maskX * bigPicMaxX / maskMaxX;
            var bigImgY = maskY * bigPicMaxY / maskMaxY;

            // (7)- 将效果图最大距离 赋值给效果图的样式
            // 由于图片的移动是向相反方向移动，故加负号
            bigImg.style.left = -bigImgX + 'px';
            bigImg.style.top = -bigImgY + 'px';
        })