js实现放大镜效果

实现放大镜效果的基本思路

放大镜效果通常用于电商网站展示商品细节。核心原理是通过监听鼠标移动事件，同步显示放大区域的图像。

HTML结构

创建一个包含原图和放大镜区域的容器：

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

CSS样式

设置基本样式和放大镜外观：

.magnifier-container {
  position: relative;
  width: 500px;
  height: 500px;
}

#originalImg {
  width: 100%;
  height: auto;
}

.magnifier {
  position: absolute;
  width: 150px;
  height: 150px;
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
  background-repeat: no-repeat;
  display: none;
  pointer-events: none;
}

JavaScript实现

监听鼠标事件并计算放大区域：

const originalImg = document.getElementById('originalImg');
const magnifier = document.querySelector('.magnifier');
const zoomLevel = 2; // 放大倍数

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

  const {left, top, width, height} = originalImg.getBoundingClientRect();
  const x = e.pageX - left;
  const y = e.pageY - top;

  // 限制放大镜不超出图像边界
  const magnifierWidth = magnifier.offsetWidth;
  const magnifierHeight = magnifier.offsetHeight;

  let posX = x - magnifierWidth/2;
  let posY = y - magnifierHeight/2;

  posX = Math.max(0, Math.min(posX, width - magnifierWidth));
  posY = Math.max(0, Math.min(posY, height - magnifierHeight));

  magnifier.style.left = `${posX}px`;
  magnifier.style.top = `${posY}px`;

  // 计算放大背景位置
  const bgX = -posX * zoomLevel;
  const bgY = -posY * zoomLevel;

  magnifier.style.backgroundImage = `url(${originalImg.src})`;
  magnifier.style.backgroundSize = `${width * zoomLevel}px ${height * zoomLevel}px`;
  magnifier.style.backgroundPosition = `${bgX}px ${bgY}px`;
});

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

高级优化方案

对于更流畅的体验，可以预加载放大后的图像：

const zoomImg = new Image();
zoomImg.src = 'large-image.jpg';

// 在mousemove事件中使用zoomImg代替originalImg
magnifier.style.backgroundImage = `url(${zoomImg.src})`;

响应式处理

添加窗口大小变化时的调整：

window.addEventListener('resize', () => {
  const {width, height} = originalImg.getBoundingClientRect();
  magnifier.style.backgroundSize = `${width * zoomLevel}px ${height * zoomLevel}px`;
});

性能优化

使用requestAnimationFrame优化动画性能：

let lastX = 0, lastY = 0;
let rafId = null;

const updateMagnifier = () => {
  const {left, top, width, height} = originalImg.getBoundingClientRect();
  const bgX = -lastX * zoomLevel;
  const bgY = -lastY * zoomLevel;

  magnifier.style.backgroundPosition = `${bgX}px ${bgY}px`;
  rafId = null;
};

originalImg.addEventListener('mousemove', (e) => {
  // ...其他代码

  lastX = posX;
  lastY = posY;

  if (!rafId) {
    rafId = requestAnimationFrame(updateMagnifier);
  }
});

这些代码实现了一个基础的放大镜效果，可以根据实际需求调整放大倍数、放大镜形状和尺寸等参数。