原生js实现一个放大镜效果超详细-前端开发

下面我将详细讲解“原生js实现一个放大镜效果超详细”的完整攻略，包括具体步骤和示例说明。

下面我将详细讲解“原生js实现一个放大镜效果超详细”的完整攻略，包括具体步骤和示例说明。

1. 确定实现功能

首先要明确要实现的功能，即在鼠标移动到图片区域的某个位置时，显示该位置的放大图像，这里需要实现以下功能：

鼠标移动到图片区域时，获取鼠标位置，并计算放大图像的位置
显示放大图像，并确定其位置和大小
鼠标移出图片区域时，隐藏放大图像

2. HTML和CSS布局

创建一个HTML元素作为放大镜，用CSS设置其样式和位置，然后把图片作为背景图设置在另一个HTML元素上。

<div id="img-container">
  <div id="zoom"></div>
  <div id="img" style="background-image: url(img.jpg)"></div>
</div>

#img-container {
  position: relative;
  width: 500px;
  height: 500px;
}

#img {
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

#zoom {
  position: absolute;
  width: 150px;
  height: 150px;
  border: 2px solid #eee;
  display: none;
  /* 隐藏放大镜 */
  background-color: rgba(0, 0, 0, 0.2);
  /* 设置放大镜背景色，透明度为0.2 */
  background-repeat: no-repeat;
}

3. JS实现放大效果

3.1 获取鼠标位置

监听图片容器的mousemove事件，获取鼠标相对于容器左上角的坐标位置。由于鼠标位置相对于屏幕而言，需要计算鼠标位置与容器位置的偏移量，并将其作为参数传入放大镜的位置计算函数。

const imgContainer = document.getElementById("img-container");
const zoom = document.getElementById("zoom");
const img = document.getElementById("img");

imgContainer.addEventListener("mousemove", e => {
  const x = e.pageX - imgContainer.offsetLeft;
  const y = e.pageY - imgContainer.offsetTop;

  setZoomPosition(x, y);
});

3.2 计算放大图像位置

根据鼠标位置计算放大镜的位置，然后通过对放大效果的大小进行调整，动态设置放大环境中展示的文件位置（计算公式可以根据实际情况进行调整）。

function setZoomPosition(x, y) {
  const zoomWidth = zoom.offsetWidth;
  const zoomHeight = zoom.offsetHeight;
  const imgWidth = img.offsetWidth;
  const imgHeight = img.offsetHeight;
  const bgWidth =
    parseInt(getComputedStyle(img).backgroundSize.split(" ")[0]) || imgWidth;
  const bgHeight =
    parseInt(getComputedStyle(img).backgroundSize.split(" ")[1]) || imgHeight;

  const ratioX = zoomWidth / imgWidth;
  const ratioY = zoomHeight / imgHeight;

  const bgX = (x / imgWidth) * bgWidth - zoomWidth / 2;
  const bgY = (y / imgHeight) * bgHeight - zoomHeight / 2;

  const offsetX = x - zoomWidth / 2;
  const offsetY = y - zoomHeight / 2;

  if (bgX < 0) {
    zoom.style.backgroundPositionX = "0";
  } else if (bgX > bgWidth - zoomWidth / ratioX) {
    zoom.style.backgroundPositionX = bgWidth - zoomWidth / ratioX + "px";
  } else {
    zoom.style.backgroundPositionX = bgX + "px";
  }

  if (bgY < 0) {
    zoom.style.backgroundPositionY = "0";
  } else if (bgY > bgHeight - zoomHeight / ratioY) {
    zoom.style.backgroundPositionY = bgHeight - zoomHeight / ratioY + "px";
  } else {
    zoom.style.backgroundPositionY = bgY + "px";
  }

  zoom.style.left = offsetX + "px";
  zoom.style.top = offsetY + "px";

  zoom.style.display = "block";
  // 显示放大镜
}

3.3 隐藏放大图像

监听图片容器的mouseleave事件，隐藏放大镜。

imgContainer.addEventListener("mouseleave", () => {
  zoom.style.display = "none";
});

4. 示例说明

示例1

此示例演示了使用原生JS实现放大效果的基本步骤。具体实现步骤如下：

创建HTML和CSS元素及样式
在JS中获取元素并监听mousemove和mouseleave事件
编写计算放大效果位置的函数
显示和隐藏放大效果

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>JS放大镜效果示例1</title>
    <style>
      #img-container {
        position: relative;
        width: 500px;
        height: 500px;
      }

      #img {
        width: 100%;
        height: 100%;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
      }

      #zoom {
        position: absolute;
        width: 150px;
        height: 150px;
        border: 2px solid #eee;
        display: none;
        /* 隐藏放大镜 */
        background-color: rgba(0, 0, 0, 0.2);
        /* 设置放大镜背景色，透明度为0.2 */
        background-repeat: no-repeat;
      }
    </style>
  </head>
  <body>
    <div id="img-container">
      <div id="zoom"></div>
      <div id="img" style="background-image: url(img1.jpg)"></div>
    </div>

    <script>
      const imgContainer = document.getElementById("img-container");
      const zoom = document.getElementById("zoom");
      const img = document.getElementById("img");

      imgContainer.addEventListener("mousemove", e => {
        const x = e.pageX - imgContainer.offsetLeft;
        const y = e.pageY - imgContainer.offsetTop;

        setZoomPosition(x, y);
      });

      imgContainer.addEventListener("mouseleave", () => {
        zoom.style.display = "none";
      });

      function setZoomPosition(x, y) {
        const zoomWidth = zoom.offsetWidth;
        const zoomHeight = zoom.offsetHeight;
        const imgWidth = img.offsetWidth;
        const imgHeight = img.offsetHeight;
        const bgWidth = parseInt(
          getComputedStyle(img).backgroundSize.split(" ")[0]
        );
        const bgHeight = parseInt(
          getComputedStyle(img).backgroundSize.split(" ")[1]
        );

        const ratioX = zoomWidth / imgWidth;
        const ratioY = zoomHeight / imgHeight;

        const bgX = (x / imgWidth) * bgWidth - zoomWidth / 2;
        const bgY = (y / imgHeight) * bgHeight - zoomHeight / 2;

        const offsetX = x - zoomWidth / 2;
        const offsetY = y - zoomHeight / 2;

        if (bgX < 0) {
          zoom.style.backgroundPositionX = "0";
        } else if (bgX > bgWidth - zoomWidth / ratioX) {
          zoom.style.backgroundPositionX =
            bgWidth - zoomWidth / ratioX + "px";
        } else {
          zoom.style.backgroundPositionX = bgX + "px";
        }

        if (bgY < 0) {
          zoom.style.backgroundPositionY = "0";
        } else if (bgY > bgHeight - zoomHeight / ratioY) {
          zoom.style.backgroundPositionY =
            bgHeight - zoomHeight / ratioY + "px";
        } else {
          zoom.style.backgroundPositionY = bgY + "px";
        }

        zoom.style.left = offsetX + "px";
        zoom.style.top = offsetY + "px";

        zoom.style.display = "block";
        // 显示放大镜
      }
    </script>
  </body>
</html>

示例2

此示例演示了使用原生JS实现放大效果的优化，使其更加流畅、实用。具体实现步骤如下：

创建HTML元素和CSS样式，将放大效果显示在边框内部，增加放大效果为视觉中心，优化用户体验
在JS中对计算公式进行优化，使放大效果更加精准，完美呈现

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>JS放大镜效果示例2</title>
    <style>
      #img-container {
        position: relative;
        width: 500px;
        height: 500px;
      }

      #img {
        width: 100%;
        height: 100%;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
      }

      #zoom {
        position: absolute;
        width: 200px;
        height: 200px;
        border: 1px dashed #999;
        display: none;
        /* 隐藏放大镜 */
        background-color: rgba(255, 255, 255, 0.5);
        /* 设置放大镜背景色，透明度为0.2 */
        background-repeat: no-repeat;
        background-size: 800% 800%;
        /* 放大环境宽度增加700%，显示放大效果在环境中心 */
        background-position: -150% -150%;
        /* 外部边框宽高为200像素，计算器为总长度为800%，
           将放大效果定位,-100%表示左侧对齐，
           负数在向左偏移，-200%为上部对齐，-150%为居中 */
        border-radius: 50%;
        /* 设置边框为圆形 */
      }
    </style>
  </head>
  <body>
    <div id="img-container">
      <div id="zoom"></div>
      <div id="img" style="background-image: url(img2.jpg)"></div>
    </div>

    <script>
      const imgContainer = document.getElementById("img-container");
      const zoom = document.getElementById("zoom");
      const img = document.getElementById("img");

      imgContainer.addEventListener("mousemove", e => {
        const x = e.pageX - imgContainer.offsetLeft;
        const y = e.pageY - imgContainer.offsetTop;

        setZoomPosition(x, y);
      });

      imgContainer.addEventListener("mouseleave", () => {
        zoom.style.display = "none";
      });

      function setZoomPosition(x, y) {
        const zoomWidth = zoom.offsetWidth;
        const zoomHeight = zoom.offsetHeight;
        const imgWidth = img.offsetWidth;
        const imgHeight = img.offsetHeight;
        const bgWidth = parseInt(
          getComputedStyle(img).backgroundSize.split(" ")[0]
        );
        const bgHeight = parseInt(
          getComputedStyle(img).backgroundSize.split(" ")[1]
        );

        const ratioX = bgWidth / imgWidth;
        const ratioY = bgHeight / imgHeight;

        const bgX = -x * ratioX + zoomWidth / 2;
        const bgY = -y * ratioY + zoomHeight / 2;

        const offsetX = x - zoomWidth / 2;
        const offsetY = y - zoomHeight / 2;

        if (bgX < 0) {
          bgX = 0;
        } else if (bgX > bgWidth - zoomWidth / ratioX) {
          bgX = bgWidth - zoomWidth / ratioX;
        }

        if (bgY < 0) {
          bgY = 0;
        } else if (bgY > bgHeight - zoomHeight / ratioY) {
          bgY = bgHeight - zoomHeight / ratioY;
        }

        zoom.style.backgroundPositionX = bgX + "px";
        zoom.style.backgroundPositionY = bgY + "px";
        zoom.style.left = offsetX + "px";
        zoom.style.top = offsetY + "px";

        zoom.style.display = "block";
        // 显示放大镜
      }
    </script>
  </body>
</html>

到此为止，通过以上步骤和示例，我们就能够成功地实现一个用JavaScript实现的图片放大镜效果！