怎样用js写放大镜？-CSDN博客

本文链接：https://blog.csdn.net/m0_55832273/article/details/120407547
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 520px;
      height: 293px;
      position: relative;
    }

    .box img {
      width: 100%;
    }

    .masker {
      width: 160px;
      height: 160px;
      background: rgba(151, 238, 234, 1);
      opacity: 0.5;
      position: absolute;
      top: 0;
      left: 0;
      display: none;
      pointer-events: none;
      cursor: pointer;
    }

    .big-box {
      width: 800px;
      height: 800px;
      position: absolute;
      top: 0;
      left: 560px;
      border: 1px solid red;
      overflow: hidden;
      display: none;
    }

    .big-box img {
      width: 1422px;
      position: absolute;
      top: 0;
      left: 0;
    }
  </style>
</head>

<body>
  <div class="box">
    <!-- 小图片 -->
    <img src="https://images5.alphacoders.com/116/thumb-1920-1166934.jpg" alt="">
    <!-- 遮罩层 -->
    <div class="masker"></div>
    <div class="big-box">
      <!-- 大图片 -->
      <img src="https://images5.alphacoders.com/116/thumb-1920-1166934.jpg" alt="">
    </div>
  </div>
  <script>
    // 获取box
    var box = document.querySelector('.box')
    // 获取遮罩层
    var masker = document.querySelector('.masker')
    // 获取右侧框
    var bigBox = document.querySelector('.big-box')
    // 获取大图
    var bigImg = document.querySelector('.big-box img')

    // 给小图添加鼠标移入事件，鼠标移入显示遮罩层和右侧的大盒子
    box.addEventListener('mouseover', function () {
      masker.style.display = 'block'
      bigBox.style.display = 'block'
    })

    // 给小图添加鼠标移出事件，鼠标移出时，遮罩层和右侧大图隐藏
    box.addEventListener('mouseout', function () {
      masker.style.display = 'none'
      bigBox.style.display = 'none';
    })

    box.addEventListener('mousemove', function (e) {
      e = e || window.event
      console.log(e.offsetX, e.offsetY);
      // 获取光标在左侧小图盒子内的坐标点
      var x = e.offsetX - masker.offsetWidth / 2;
      var y = e.offsetY - masker.offsetHeight / 2;
      // masker的最大偏移量
      var maxX = box.offsetWidth - masker.offsetWidth;
      var maxY = box.offsetHeight - masker.offsetHeight;

      if (x < 0) {
        // 当给masker设置的偏移量小于0时，给其设置为0 目的就是不让masker溢出小图框
        x = 0
      } else if (x > maxX) {
        x = maxX
      }
      if (y < 0) {
        //当给masker设置的偏移量小于0时，给其设置为0 目的就是不让masker溢出小图框
        y = 0
      } else if (y > maxY) {
        y = maxY
      }
      // 给黄色遮罩设置偏移量使跟随光标移动
      masker.style.left = x + 'px'
      masker.style.top = y + 'px'

      // 大图的最大偏移量
      var bgImgX = bigImg.offsetWidth - bigBox.offsetWidth;
      var bgImgY = bigImg.offsetHeight - bigBox.offsetHeight;
      // 右大图的实际的偏移量
      var bgX = x * bgImgX / maxX
      var bgY = y * bgImgY / maxY
      //将大图的实际偏移量赋值
      bigImg.style.left = -bgX + 'px';
      bigImg.style.top = -bgY + 'px';
    })
  </script>
</body>

</html>