如何用js实现放大镜

实现放大镜的基本思路

放大镜功能通常通过监听鼠标移动事件，动态显示原图的局部放大区域。核心步骤包括创建放大镜容器、计算放大比例和位置、同步鼠标移动。

HTML结构准备

创建一个包含原图和放大镜容器的基本结构。原图需要设置为可定位的父容器内，放大镜为一个绝对定位的浮动元素。

<div class="container">
  <img id="originalImg" src="original.jpg" alt="Original Image">
  <div class="magnifier"></div>
</div>

CSS样式设置

设置原图容器和放大镜的样式，确保放大镜能覆盖在原图上并显示放大效果。放大镜通常为圆形或方形，背景通过background-size控制缩放。

.container {
  position: relative;
  width: 500px; /* 原图显示宽度 */
}
.magnifier {
  position: absolute;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: 2px solid #fff;
  background-repeat: no-repeat;
  pointer-events: none; /* 防止遮挡鼠标事件 */
  display: none;
}

JavaScript逻辑实现

通过鼠标事件监听计算放大镜位置和背景图偏移量。需获取原图实际尺寸与显示尺寸的比例关系。

const originalImg = document.getElementById('originalImg');
const magnifier = document.querySelector('.magnifier');
const container = document.querySelector('.container');

// 确保图片加载完成
originalImg.onload = function() {
  const imgWidth = originalImg.naturalWidth;
  const imgHeight = originalImg.naturalHeight;
  const displayWidth = originalImg.clientWidth;
  const displayHeight = originalImg.clientHeight;
  const scaleX = imgWidth / displayWidth;
  const scaleY = imgHeight / displayHeight;

  container.addEventListener('mousemove', (e) => {
    const rect = container.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;

    // 限制放大镜不超出边界
    if (x < 0 || y < 0 || x > displayWidth || y > displayHeight) {
      magnifier.style.display = 'none';
      return;
    }

    magnifier.style.display = 'block';
    magnifier.style.left = `${x - magnifier.clientWidth / 2}px`;
    magnifier.style.top = `${y - magnifier.clientHeight / 2}px`;
    magnifier.style.backgroundImage = `url(${originalImg.src})`;
    magnifier.style.backgroundSize = `${imgWidth}px ${imgHeight}px`;
    magnifier.style.backgroundPosition = `-${x * scaleX - magnifier.clientWidth / 2}px -${y * scaleY - magnifier.clientHeight / 2}px`;
  });

  container.addEventListener('mouseleave', () => {
    magnifier.style.display = 'none';
  });
};

高级优化方向

添加过渡动画效果提升用户体验，可通过CSS的transition属性实现平滑移动。考虑使用transform替代left/top以提高性能。

.magnifier {
  transition: transform 0.1s ease;
}

// 替换left/top设置
magnifier.style.transform = `translate(${x - magnifier.clientWidth / 2}px, ${y - magnifier.clientHeight / 2}px)`;

跨浏览器兼容性

注意处理naturalWidth和clientWidth的兼容性问题，必要时使用window.getComputedStyle获取精确尺寸。对于IE旧版本，需额外添加事件监听兼容代码。