原生JS实现放大镜效果

Bertha 。 2024-04-28 13:11 94阅读 0赞

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5oiR5piv5rOi5ZOp5Liq5rOi_size_20_color_FFFFFF_t_70_g_se_x_16][]

1、鼠标经过box的时候 显示 mask和bigBox ， 当鼠标离开box的时候隐藏mask和bigBox

2、当鼠标在盒子中移动的时候，让mask和鼠标一起移动

3、当mask移动的时候，让大图片移动

<!DOCTYPE html>
    <html>
    
    <head lang="en">
      <meta charset="UTF-8">
      <title></title>
      <style>
        * {
          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;
          border: 1px solid #ccc;
          overflow: hidden;
          display: none;
        }
    
        .big img {
          position: absolute;
        }
    
        .mask {
          width: 175px;
          height: 175px;
          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">
          <img src="images/small.jpg" width="350" alt="" />
          <div class="mask"></div>
        </div>
        <div class="big">
          <img src="images/big.jpg" width="800" alt="" />
        </div>
      </div>
      <script>
        // 获取box、small盒子、big盒子
        var box = document.getElementById("box");
        var smallBox = box.children[0];
        var bigBox = box.children[1];
    
        // 获取小图片
        var smallImg = smallBox.children[0];
        // 获取遮罩
        var mask = smallBox.children[1];
        // 获取大图片
        var bigImg = bigBox.children[0];
    
        // 1、 鼠标经过box的时候 显示 mask和bigBox， 当鼠标离开box的时候隐藏mask和bigBox
        box.onmouseover = function () {
          mask.style.display = "block";
          bigBox.style.display = "block";
        }
    
        box.onmouseout = function () {
          mask.style.display = "none";
          bigBox.style.display = "none";
        }
    
        // 2、 当鼠标在盒子中移动的时候， 让mask和鼠标一起移动
        box.onmousemove = function (e) {
          // 获取鼠标在盒子里面的坐标,也就是mask的坐标
          var maskX = e.pageX - box.offsetLeft;
          var maskY = e.pageY - box.offsetTop;
    
          // 让鼠标位于盒子中间
          maskX = maskX - mask.offsetWidth / 2;
          maskY = maskY - mask.offsetHeight / 2;
    
          // 限制mask的活动范围
          maskX = maskX < 0 ? 0 : maskX;
          maskY = maskY < 0 ? 0 : maskY;
    
          maskX = maskX > box.offsetWidth - mask.offsetWidth ? box.offsetWidth - mask.offsetWidth : maskX;
          maskY = maskY > box.offsetHeight - mask.offsetHeight ? box.offsetHeight - mask.offsetHeight : maskY;
    
          // 把坐标设置给mask
          mask.style.left = maskX + "px";
          mask.style.top = maskY + "px";
    
          // 3、 当mask移动的时候， 让大图片移动
          //  mask移动的距离 / mask最大能够移动的距离 = 大图片移动的距离 / 大图片最大能够移动的距离
          // mask最大能够移动距离
          var maskMax = box.offsetWidth - mask.offsetWidth;
          var bingImgMax = bigImg.offsetWidth - bigBox.offsetWidth;
    
          // 计算得出大图片移动距离
          var bigImgX = maskX * bingImgMax / maskMax;
          var bigImgY = maskY * bingImgMax / maskMax;
    
          bigImg.style.left = -bigImgX + "px";
          bigImg.style.top = -bigImgY + "px";
    
        }
      </script>
    </body>
    
    </html>

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5oiR5piv5rOi5ZOp5Liq5rOi_size_20_color_FFFFFF_t_70_g_se_x_16]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/28/46cbfd98ade3439b965a866dc180c605.png