js实现图片放大效果

使用 CSS transform 实现放大效果

通过 CSS 的 transform: scale() 属性配合过渡效果实现平滑放大。将以下代码添加到图片元素的样式或类中：

.img-zoom {
  transition: transform 0.3s ease;
}
.img-zoom:hover {
  transform: scale(1.5); /* 放大1.5倍 */
}

动态计算放大位置（跟随鼠标）

结合鼠标事件实现跟随光标位置的放大效果，需监听 mousemove 事件计算相对位置：

const img = document.querySelector('.zoom-img');
img.addEventListener('mousemove', (e) => {
  const { left, top, width, height } = e.target.getBoundingClientRect();
  const x = ((e.clientX - left) / width) * 100;
  const y = ((e.clientY - top) / height) * 100;
  img.style.transformOrigin = `${x}% ${y}%`;
  img.style.transform = 'scale(2)';
});
img.addEventListener('mouseleave', () => {
  img.style.transform = 'scale(1)';
});

使用第三方库（如 medium-zoom）

对于更复杂的场景，可使用现成的库快速实现。安装 medium-zoom 后：

import mediumZoom from 'medium-zoom';
mediumZoom('.zoomable-image', {
  margin: 24,
  background: 'rgba(0, 0, 0, 0.8)'
});

创建放大镜组件

通过绝对定位的浮动层实现局部放大效果，需计算鼠标位置与放大比例：

function createMagnifier(imgElement, zoom = 2) {
  const magnifier = document.createElement('div');
  magnifier.className = 'magnifier';
  document.body.appendChild(magnifier);

  imgElement.addEventListener('mousemove', (e) => {
    const { left, top, width, height } = imgElement.getBoundingClientRect();
    const x = e.clientX - left;
    const y = e.clientY - top;

    magnifier.style.display = 'block';
    magnifier.style.left = `${e.clientX + 20}px`;
    magnifier.style.top = `${e.clientY + 20}px`;
    magnifier.style.backgroundImage = `url(${imgElement.src})`;
    magnifier.style.backgroundSize = `${width * zoom}px ${height * zoom}px`;
    magnifier.style.backgroundPosition = `-${x * zoom}px -${y * zoom}px`;
  });

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

对应的 CSS 样式：

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

响应式处理

针对移动设备添加触摸事件支持：

imgElement.addEventListener('touchmove', (e) => {
  const touch = e.touches[0];
  const { left, top, width, height } = imgElement.getBoundingClientRect();
  const x = ((touch.clientX - left) / width) * 100;
  const y = ((touch.clientY - top) / height) * 100;
  imgElement.style.transformOrigin = `${x}% ${y}%`;
  imgElement.style.transform = 'scale(2)';
});