商城图片放大镜

女爷i 2022-11-21 11:37 138阅读 0赞

## 直接上主菜， 代码注解详细，小白也能懂（一看就会） ##

<!DOCTYPE html>
    <html>
    <head lang="en">
      <meta charset="UTF-8">
      <title></title>
      
      <style>
        img {
          display: block;
        }
        * {
          margin: 0;
          padding: 0;
        }
        .box {
          width: 350px;
          height: 350px;
          margin: 100px;
          border: 1px solid #ccc;
          position: relative;
        }
        .big {
          width: 400px;
          height: 400px;
          position: absolute;
          top: 0;
          left: 360px;
          overflow: hidden;
          display: none;
        }
        .big img {
          position: absolute;
    
        }
        .mask {
          width: 100px;
          height: 100px;
          background: rgba(255, 255, 0, 0.4);
          position: absolute;
          top: 0px;
          left: 0px;
          cursor: move;
          display: none;
        }
        .small {
          position: relative;
        }
      </style>
    </head>
    <body>
      <div class="box" id="box">
        <div class="small" id="small">
          <img src="../../img/11.jpg" width="350" height="350" alt="" />
          <div class="mask" id="mask"></div>
        </div>
        <div class="big" id="big">
          <img src="../../img/11.jpg" width="800" alt="" id="img" />
        </div>
      </div>
    </body>
    <script>
      // 1 获取节点
      let boxObj = document.getElementById('box');
      let smallObj = document.getElementById('small');
      let maskObj = document.getElementById('mask');
      let bigObj = document.getElementById('big');
      let bigImg = document.getElementById('img');
      // 2 鼠标移入smallObj显示mask和big
      smallObj.onmouseenter = function () {
        maskObj.style.display = 'block';
        bigObj.style.display = 'block';
      }
      // 3 鼠标移出则隐藏
      smallObj.onmouseleave = function () {
        maskObj.style.display = 'none';
        bigObj.style.display = 'none';
      }
      // 获取box的left和top值
      let boxLeft = boxObj.offsetLeft;
      let boxTop = boxObj.offsetTop;
      // 4 给small绑定鼠标移动事件,让mask动起来
      smallObj.onmousemove = function (eve) {
        // 4-1 获取鼠标的实时位置
        let mouseX = eve.pageX;
        let mouseY = eve.pageY;
        // console.log(mouseX, mouseY);
        // 4-2 计算出mask的位置
        let maskPosX = mouseX - boxLeft - maskObj.offsetWidth / 2;
        let maskPosY = mouseY - boxTop - maskObj.offsetHeight / 2;
        // 4-3 边界的设置
        if (maskPosX < 0) maskPosX = 0;
        if (maskPosY < 0) maskPosY = 0;
        // 最大top和left的设置
        let maskTargetX = smallObj.offsetWidth - maskObj.offsetWidth;
        let maskTargetY = smallObj.offsetHeight - maskObj.offsetHeight;
        if (maskPosX > maskTargetX) maskPosX = maskTargetX;
        if (maskPosY > maskTargetY) maskPosY = maskTargetY;
        // 4-4 设置mask(小黄块的位置)
        maskObj.style.left = maskPosX + 'px';
        maskObj.style.top = maskPosY + 'px';
        // 4-5 设置打图的位置跟随小黄块动
        //黄色盒子覆盖到哪里,对应的大盒子里图片展示哪里
        //  mask移动的距离 / mask移动的最大距离 == img移动的距离 / img移动的最大距离
        //img移动的距离 = mask移动的距离 / mask移动的最大距离 * img移动的最大距离
        // 4-5-1 计算打图的最大边界值
        let imgTargeX = bigImg.offsetWidth - bigObj.offsetWidth;
        let imgTargeY = bigImg.offsetHeight - bigObj.offsetHeight;
        // 计算大图根据鼠标移动的位置
        let tmpImgPosX = maskPosX / maskTargetX * imgTargeX;
        let tmpImgPosY = maskPosY / maskTargetY * imgTargeY;
        // 大图移动方向和滑块相反,所以给负值
        bigImg.style.left = -tmpImgPosX + 'px';
        bigImg.style.top = -tmpImgPosY + 'px';
      }
    </script>
    </html>