图片局部放大镜

<!DOCTYPE html>
<html lang="zh">
  <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 type="text/css">
      body * {
        margin: 0;
        padding: 0;
      }

      #moveBox {
         323px;
        position: relative;
        margin: 50px auto;
      }

      #mirror {
        position: absolute;
        overflow: hidden;
        height: 100px;
         100px;
        /* border: 5px black solid; */
        cursor: crosshair;
      }
      .maxImg {
        position: absolute;
      }
    </style>
  </head>

  <body>
    <div id="moveBox">
      <div id="mirror">
        <img
          src="https://img.alicdn.com/bao/uploaded/i2/1026430696/O1CN011H0o7UD6ZwLT3vl_!!1026430696.jpg_430x430q90.jpg"
          class="maxImg"
        />
      </div>
      <div id="pic">
        <img
          src="https://img.alicdn.com/bao/uploaded/i2/1026430696/O1CN011H0o7UD6ZwLT3vl_!!1026430696.jpg_430x430q90.jpg"
          class="nowImg"
        />
      </div>
    </div>
    <script type="text/javascript">
      window.onload = function() {
        var mirror = document.querySelector("#mirror");
        var moveBox = document.querySelector("#moveBox");
        var pic = document.querySelector("#pic");
        var nowImg = document.querySelector(".nowImg");
        var maxImg = document.querySelector(".maxImg");
        var nowImgLeft = nowImg.getBoundingClientRect().left;
        var nowImgTop = nowImg.getBoundingClientRect().top;
        // 放大镜高
        var mirrorHeight = mirror.offsetHeight;
        // 放大镜宽
        var mirrorWidth = mirror.offsetWidth;
        var nowImgWidth = nowImg.offsetWidth;
        var nowImgHeight = nowImg.offsetHeight;
        var picHeight = document
          .getElementById("pic")
          .getElementsByTagName("img")[0].offsetHeight;
        var picWidth = document
          .getElementById("pic")
          .getElementsByTagName("img")[0].offsetWidth;
        var sacle = 2;

        function moving(e) {
          // 鼠标距离
          var x = e.clientX - nowImgLeft;
          var y = e.clientY - nowImgTop;
          var xxx =
            ((x - mirrorWidth / 2) / nowImgWidth) * nowImgWidth * sacle +
            (mirrorWidth / 2) * (sacle - 1);
          var yyy =
            ((y - mirrorHeight / 2) / nowImgHeight) * nowImgHeight * sacle +
            (mirrorHeight / 2) * (sacle - 1);

          // 放大图片宽度
          maxImg.style.width = nowImg.clientWidth * sacle + "px";

          // 左边缘限制
          if (
            x - mirrorWidth / 2 < 0 &&
            y - mirrorHeight / 2 > 0 &&
            y + mirrorHeight / 2 < picHeight
          ) {
            mirror.style.left = 0 + "px";
            maxImg.style.top = "-" + yyy + "px";
            mirror.style.top = y - mirrorHeight / 2 + "px";
            // maxImg.style.left = 0 + "px"
          }
          // 上边缘限制
          if (
            y - mirrorHeight / 2 < 0 &&
            x - mirrorWidth / 2 > 0 &&
            x + mirrorWidth / 2 < picWidth
          ) {
            mirror.style.top = 0 + "px";
            maxImg.style.left = "-" + xxx + "px";
            mirror.style.left = x - mirrorWidth / 2 + "px";
            if (x - mirrorWidth / 2 < 0) {
              mirror.style.left = 0 + "px";
            }
          }
          // 右边缘限制
          if (
            x + mirrorWidth / 2 > picWidth &&
            y + mirrorHeight / 2 < picHeight &&
            y - mirrorHeight / 2 > 0
          ) {
            mirror.style.left = picWidth - mirrorWidth + "px";
            maxImg.style.top = "-" + yyy + "px";
            mirror.style.top = y - mirrorHeight / 2 + "px";
          }
          // 下边缘限制
          if (
            y + mirrorHeight / 2 > picHeight &&
            x + mirrorWidth / 2 < picWidth &&
            x - mirrorWidth / 2 > 0
          ) {
            mirror.style.top = picHeight - mirrorHeight + "px";
            maxImg.style.left = "-" + xxx + "px";
            mirror.style.left = x - mirrorWidth / 2 + "px";
          }

          if (
            x <= picWidth &&
            y <= picHeight &&
            x >= -picWidth &&
            y >= -picHeight
          ) {
            changePosition(x, y);
          }
        }
        function changePosition(x, y) {
          if (
            x + mirrorWidth / 2 < picWidth &&
            y + mirrorWidth / 2 < picHeight &&
            x - mirrorWidth / 2 > 0 &&
            y - mirrorWidth / 2 > 0
          ) {
            // mirror 放大镜
            mirror.style.left = x - mirrorWidth / 2 + "px";
            mirror.style.top = y - mirrorHeight / 2 + "px";
            // const xxx = (x - 55) / 323 * 323 * sacle + 55 * (sacle - 1)
            // const yyy = (y - 55) / 430 * 430 * sacle + 55 * (sacle - 1)
            const xxx =
              ((x - mirrorWidth / 2) / nowImgWidth) * nowImgWidth * sacle +
              (mirrorWidth / 2) * (sacle - 1);
            const yyy =
              ((y - mirrorHeight / 2) / nowImgHeight) * nowImgHeight * sacle +
              (mirrorHeight / 2) * (sacle - 1);
            console.log("xxxx:", xxx, "yyyy:", yyy);
            // 大图
            maxImg.style.left = "-" + xxx + "px";
            maxImg.style.top = "-" + yyy + "px";
          }
        }
        moveBox.onmousemove = function(e) {
          var e = e ? e : window.event;
          moving(e);
        };
        moveBox.onmouseout = function(e) {
          mirror.style.display = "none";
        };
        moveBox.onmouseover = function(e) {
          mirror.style.display = "block";
        };
        maxImg.onmousewheel = function(e) {
          if (event.deltaY < 0) {
            sacle += 0.05;
          } else {
            sacle -= 0.05;
          }
          if (sacle < 1) {
            sacle = 1;
          }
          // if (sacle > 2) {
          //   sacle = 2;
          // }
          event.preventDefault();
        };
      };
    </script>
  </body>
</html>
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/yzyh/p/15239836.html