图片局部放大镜

<!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 {
        width: 323px;
        position: relative;
        margin: 0 auto;
      }

      #mirror {
        position: absolute;
        overflow: hidden;
        height: 100px;
        width: 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">
      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 sacle = 1.5

      function moving(e) {
        var nowImgLeft = nowImg.getBoundingClientRect().left
        var nowImgTop = nowImg.getBoundingClientRect().top
        // 鼠标距离
        var x = e.clientX - nowImgLeft;
        var y = e.clientY - nowImgTop;
        var nowX = e.target.getBoundingClientRect().left
        var nowY = e.target.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;
        
        // 放大图片宽度
        maxImg.style.width = nowImg.clientWidth * sacle + "px";
        // 边缘限制
        if(x - mirrorWidth / 2 < 0) {
          mirror.style.left = 0  + "px";
        }
        // 边缘限制
        if(y - mirrorWidth / 2 < 0) {
          mirror.style.top = 0  + "px";
        }
        // 边缘限制
        if(x + mirrorWidth / 2 > picWidth) {
          mirror.style.left = picWidth - mirrorWidth  + "px";
        }
        // 边缘限制
        if(y + mirrorWidth / 2 > picHeight) {
          mirror.style.top = picHeight - mirrorWidth + "px";
        }
        if (
          x + mirrorWidth / 2 < picWidth &&
          y + mirrorWidth / 2 < picHeight &&
          x - mirrorWidth / 2 > 0 &&
          y - mirrorWidth / 2 > 0 &&
          x <= picWidth &&
          y <= picHeight &&
          x >= -picWidth &&
          y >= -picHeight
        ) {
          // mirror 放大镜
          mirror.style.left = x - mirrorWidth / 2 + "px";
          mirror.style.top = y - mirrorHeight / 2 + "px";
          // 2个放大镜left的距离
          var bl = 2 * mirror.offsetLeft;
          var bt = 2 * mirror.offsetTop;
          console.log(‘111:‘,bl, bt)
          console.log(‘222:‘,bl + mirrorWidth / 2, bt + mirrorHeight / 2)
          console.log(‘sacle:‘, sacle)
          // 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:‘, x, ‘yyyy:‘, y)
          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>

图片局部放大镜

上一篇:Cocktail for Mac(系统清理)兼容big sur v14.3.2激活版


下一篇:vue修饰符