js实现商品图片放大镜

商品图片放大镜是一种常见的网页交互效果，用于在用户鼠标悬停在商品图片上时显示放大的图像部分。以下是实现这一功能的基础概念、优势、类型、应用场景以及具体的实现方法。

基础概念

放大镜效果：通过创建一个覆盖在原始图像上的半透明层（通常称为“放大镜”），并在该层中显示原始图像的放大版本。
鼠标跟踪：放大镜跟随鼠标指针移动，实时更新显示的放大区域。

优势

增强用户体验：用户可以更清晰地查看商品细节，有助于提高购买决策的准确性。
减少页面跳转：无需跳转到新页面即可查看详细信息，提升网站的整体流畅性。

类型

固定放大镜：放大镜的大小和位置固定。
动态放大镜：根据鼠标位置动态调整放大镜的大小和位置。

应用场景

电商网站：展示服装、电子产品等商品的细节。
艺术品销售平台：让用户能细致观察艺术品的纹理和色彩。
摄影作品展示：放大细节以展示摄影师的技巧。

实现方法

以下是一个简单的JavaScript实现示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image Magnifier</title>
<style>
  .magnifier-container {
    position: relative;
    display: inline-block;
  }
  .magnifier-lens {
    position: absolute;
    border: 1px 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: -100%;
    width: 100%;
    height: 100%;
    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="product.jpg" alt="Product Image" id="product-image">
  <div class="magnifier-lens" id="magnifier-lens"></div>
  <div class="magnifier-result" id="magnifier-result">
    <img src="product.jpg" alt="Magnified Product Image" id="magnified-image">
  </div>
</div>

<script>
  const container = document.querySelector('.magnifier-container');
  const image = document.getElementById('product-image');
  const lens = document.getElementById('magnifier-lens');
  const result = document.getElementById('magnifier-result');
  const magnifiedImage = document.getElementById('magnified-image');

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

  container.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 > container.offsetWidth - lens.offsetWidth) {
      x = container.offsetWidth - lens.offsetWidth;
    }
    if (x < 0) {
      x = 0;
    }
    if (y > container.offsetHeight - lens.offsetHeight) {
      y = container.offsetHeight - lens.offsetHeight;
    }
    if (y < 0) {
      y = 0;
    }

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

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

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

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

</body>
</html>