如何用js实现放大镜

实现放大镜效果的步骤

HTML 结构 创建基本的 HTML 结构，包含原图容器和放大镜显示的容器：

<div class="image-container">
  <img id="original-img" src="original.jpg" alt="Original Image">
  <div class="magnifier"></div>
</div>
<div class="zoomed-area"></div>

CSS 样式 设置放大镜和放大区域的样式：

.image-container {
  position: relative;
  width: 500px;
  height: 300px;
  overflow: hidden;
}

.magnifier {
  position: absolute;
  width: 100px;
  height: 100px;
  border: 2px solid #fff;
  border-radius: 50%;
  cursor: none;
  display: none;
  background-repeat: no-repeat;
}

.zoomed-area {
  width: 300px;
  height: 300px;
  background-size: 1000px 600px;
  background-repeat: no-repeat;
  border: 1px solid #ccc;
}

JavaScript 逻辑 实现放大镜的核心交互功能：

const originalImg = document.getElementById('original-img');
const magnifier = document.querySelector('.magnifier');
const zoomedArea = document.querySelector('.zoomed-area');
const zoomLevel = 2;

originalImg.addEventListener('mousemove', (e) => {
  magnifier.style.display = 'block';

  const containerRect = originalImg.getBoundingClientRect();
  let x = e.pageX - containerRect.left;
  let y = e.pageY - containerRect.top;

  x = Math.max(0, Math.min(x, originalImg.width));
  y = Math.max(0, Math.min(y, originalImg.height));

  magnifier.style.left = (x - 50) + 'px';
  magnifier.style.top = (y - 50) + 'px';

  const bgX = -x * zoomLevel + 50;
  const bgY = -y * zoomLevel + 50;

  magnifier.style.backgroundImage = `url(${originalImg.src})`;
  magnifier.style.backgroundPosition = `${bgX}px ${bgY}px`;

  zoomedArea.style.backgroundImage = `url(${originalImg.src})`;
  zoomedArea.style.backgroundPosition = `${bgX}px ${bgY}px`;
});

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

实现原理说明

放大镜效果主要通过计算鼠标位置与背景图片的偏移来实现。当鼠标移动时，获取当前坐标并计算放大后的背景位置，使放大镜区域显示放大后的图像内容。

放大倍数通过 zoomLevel 变量控制，值越大放大效果越明显。背景图片的位置计算考虑了放大镜的偏移，确保显示正确的放大区域。

高级优化建议

添加过渡动画使放大镜移动更平滑：

.magnifier {
  transition: all 0.1s ease;
}

支持触摸设备：

originalImg.addEventListener('touchmove', (e) => {
  if (e.touches.length > 0) {
    const touch = e.touches[0];
    const mouseEvent = new MouseEvent('mousemove', {
      clientX: touch.clientX,
      clientY: touch.clientY
    });
    originalImg.dispatchEvent(mouseEvent);
  }
});

通过以上方法可以实现一个基本的放大镜效果，可根据实际需求调整放大镜大小、形状和放大倍数等参数。