原生JS实现放大镜效果

最新推荐文章于 2022-02-20 17:28:29 发布

我是波哩个波

最新推荐文章于 2022-02-20 17:28:29 发布

阅读量312

点赞数

分类专栏：前端知识点系列文章标签： javascript html 前端

本文链接：https://blog.csdn.net/ligonglanyuan/article/details/122213782

版权

前端知识点系列专栏收录该内容

5 篇文章 3 订阅

订阅专栏

这篇博客详细介绍了如何使用JavaScript实现一个图片预览功能，包括当鼠标经过盒子显示遮罩和放大图片，以及在遮罩内移动鼠标时同步调整大图片的位置。通过监听鼠标事件，实现了小图片遮罩跟随鼠标移动，并根据遮罩位置动态调整大图片的显示，创建了一个交互式的图片预览体验。

摘要由CSDN通过智能技术生成

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>