原生js放大镜效果代码

原生JavaScript放大镜效果是一种常见的网页交互效果，它允许用户通过鼠标悬停在图片上时，显示一个放大的视图。以下是实现这一效果的基础概念、优势、类型、应用场景以及示例代码。

基础概念

放大镜效果通常涉及以下几个关键点：

遮罩层（Mask）：用于显示放大后的图像区域。
放大镜容器（Magnifier Container）：包含放大后的图像。
鼠标跟踪：实时跟踪鼠标在原始图像上的位置，并相应地更新放大镜中的视图。

优势

增强用户体验：提供更直观的图像查看方式。
无需额外插件：完全依赖原生JavaScript和CSS实现。
灵活性高：可以根据需求自定义放大倍数、遮罩形状等。

类型

圆形遮罩：放大镜区域为圆形。
矩形遮罩：放大镜区域为矩形。
自定义形状遮罩：可以使用CSS创建任意形状的遮罩。

应用场景

电商网站：展示商品细节。
图片库：方便用户查看高清图片。
艺术作品展示：提供更精细的艺术品细节。

示例代码

以下是一个简单的原生JavaScript放大镜效果实现：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Magnifier Effect</title>
<style>
  .magnifier-container {
    position: relative;
    display: inline-block;
  }
  .magnifier-lens {
    position: absolute;
    border: 2px solid #000;
    width: 100px;
    height: 100px;
    background-color: rgba(255, 255, 255, 0.5);
    pointer-events: none;
    display: none;
  }
  .magnifier-result {
    position: absolute;
    top: 0;
    right: -120px; /* Adjust as needed */
    width: 200px;
    height: 200px;
    border: 1px solid #000;
    overflow: hidden;
    display: none;
  }
  .magnifier-result img {
    position: absolute;
    width: auto;
    height: auto;
  }
</style>
</head>
<body>

<div class="magnifier-container">
  <img src="your-image.jpg" alt="Image" id="magnifier-image">
  <div class="magnifier-lens" id="magnifier-lens"></div>
  <div class="magnifier-result" id="magnifier-result">
    <img src="your-image.jpg" alt="Magnified Image" id="magnifier-result-img">
  </div>
</div>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const image = document.getElementById('magnifier-image');
    const lens = document.getElementById('magnifier-lens');
    const result = document.getElementById('magnifier-result');
    const resultImg = document.getElementById('magnifier-result-img');

    const cx = result.offsetWidth / lens.offsetWidth;
    const cy = result.offsetHeight / lens.offsetHeight;

    image.addEventListener('mousemove', moveLens);
    lens.addEventListener('mousemove', moveLens);

    function moveLens(e) {
      e.preventDefault();
      const pos = getCursorPos(e);
      let x = pos.x - (lens.offsetWidth / 2);
      let y = pos.y - (lens.offsetHeight / 2);

      if (x > image.width - lens.offsetWidth) { x = image.width - lens.offsetWidth; }
      if (x < 0) { x = 0; }
      if (y > image.height - lens.offsetHeight) { y = image.height - lens.offsetHeight; }
      if (y < 0) { y = 0; }

      lens.style.left = x + 'px';
      lens.style.top = y + 'px';
      resultImg.style.left = -x * cx + 'px';
      resultImg.style.top = -y * cy + 'px';
    }

    function getCursorPos(e) {
      let a, x = 0, y = 0;
      e = e || window.event;
      a = image.getBoundingClientRect();
      x = e.pageX - a.left;
      y = e.pageY - a.top;
      x = x - window.pageXOffset;
      y = y - window.pageYOffset;
      return {x: x, y: y};
    }

    image.addEventListener('mouseenter', () => {
      lens.style.display = 'block';
      result.style.display = 'block';
    });

    image.addEventListener('mouseleave', () => {
      lens.style.display = 'none';
      result.style.display = 'none';
    });
  });
</script>

</body>
</html>

解释

HTML结构：包含原始图像、遮罩层和放大结果显示区域。
CSS样式：定义了各个元素的布局和外观。
JavaScript逻辑：
- 监听鼠标移动事件，计算并更新遮罩层和放大镜中的图像位置。
- 使用getCursorPos函数获取鼠标在图像上的精确位置。
- 根据鼠标位置调整放大镜和放大结果显示区域的位置。

通过这种方式，可以实现一个简单而有效的放大镜效果，提升用户的交互体验。