JS实现放大镜效果_autojs放大镜-CSDN博客

本文链接：https://blog.csdn.net/Shaw_Jie/article/details/127085415
<!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>
  </head>
  <style>
    * {
      margin: 0;
      padding: 0;
      list-style-type: none;
    }
    .main {
      width: 1200px;
      margin: 50 auto;
    }
    /* 小盒子内容 */
    #min {
      width: 450px;
      height: 450px;
      border: 1px solid #000;
      position: relative;
      float: left;
    }
    /* 大盒子内容 */
    #mask {
      width: 200px;
      height: 200px;
      background-color: rgba(220, 150, 10, 0.5);
      position: absolute;
      left: 0;
      top: 0;
      display: none;
    }
    #max {
      width: 500px;
      height: 500px;
      border: 1px solid #000;
      float: left;
      overflow: hidden;
      display: none;
      position: relative;
    }
    #max_img {
      position: absolute;
    }
  </style>
  <body>
    <div class="main">
      <!-- 小盒子内容 -->
      <div id="min">
        <!-- 小图片 -->
        <img src="images/min.jpg" alt="" />
        <!-- 蒙版 -->
        <div id="mask"></div>
      </div>
      <!-- 大盒子内容 -->
      <div id="max">
        <img src="images/max.jpg" alt="" id="max_img" />
      </div>
    </div>
  </body>
  <script>
    // 1.获取元素
    var min = document.querySelector("#min");
    var mask = document.querySelector("#mask");
    var max = document.querySelector("#max");
    var maxImg = document.querySelector("#max_img");
    // 2.小盒子中的事件
    // ①：鼠标进入小盒子，蒙版出现，大盒子出现
    // ②：蒙版跟随鼠标移动
    // ③：蒙版移动大盒子里的图片也移动
    // ④：移出小盒子后蒙版消失，大盒子消失

    // 开始代码
    // ①：鼠标进入小盒子，蒙版出现，大盒子出现
    min.onmouseover = function () {
      // 蒙版出现，大盒子出现
      mask.style.display = "block";
      max.style.display = "block";
    };
    // ②：光标在小盒子内移动，蒙版跟随鼠标移动
    min.onmousemove = function (e) {
      //求出光标在和小盒子内的坐标--小盒子不一定紧挨着body
      var minX = e.pageX - min.offsetLeft;
      var minY = e.pageY - min.offsetTop;
      // 光标在蒙版的中间
      minX = minX - mask.offsetWidth / 2;
      minY = minY - mask.offsetHeight / 2;

      //先求出蒙版移动的最大距离
      var maskMaxDisX = min.offsetWidth - mask.offsetWidth;
      var maskMaxDisY = min.offsetHeight - mask.offsetHeight;
      //判断蒙版移动的最大距离
      if (minX > maskMaxDisX) {
        minX = maskMaxDisX;
      } else if (minX < 0) {
        minX = 0;
      }
      if (minY > maskMaxDisY) {
        minY = maskMaxDisY;
      } else if (minY < 0) {
        minY = 0;
      }
      //设置蒙版的偏移
      mask.style.left = minX + "px";
      mask.style.top = minY + "px";

      // ③：蒙版移动大盒子里的图片也移动
      var ratioX = minX / maskMaxDisX;
      var ratioY = minX / maskMaxDisX;

      // 设置大图片的偏移
      maxImg.style.left =
        ratioX * (max.offsetWidth - maxImg.offsetWidth) + "px";
      maxImg.style.top =
        ratioY * (max.offsetHeight - maxImg.offsetHeight) + "px";
    };
    //④移出小盒子后蒙版消失，大盒子消失
    min.onmouseout = function () {
      mask.style.display = "none";
      mask.style.display = "none";
    };
  </script>
</html>
贴上自己的图片即可