当前位置：首页 > JavaScript

js实现图片放大

2026-02-28 22:02:43JavaScript

使用 CSS transform 实现图片放大

通过 CSS 的 transform: scale() 属性可以实现平滑的图片放大效果。结合 transition 可以添加动画过渡。

.image-container {
  transition: transform 0.3s ease;
}
.image-container:hover {
  transform: scale(1.2);
}

<img src="example.jpg" class="image-container">

使用鼠标位置计算放大区域

通过监听鼠标事件，可以创建跟随鼠标位置的放大镜效果。

const image = document.getElementById('zoom-image');
const zoomContainer = document.getElementById('zoom-container');
const zoomedImage = document.createElement('img');
zoomedImage.src = image.src;

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

  zoomedImage.style.transformOrigin = `${x}% ${y}%`;
  zoomedImage.style.transform = 'scale(2)';
  zoomContainer.appendChild(zoomedImage);
});

image.addEventListener('mouseleave', () => {
  zoomContainer.removeChild(zoomedImage);
});

使用 canvas 实现像素级放大

对于需要更高精度的放大效果，可以使用 canvas 绘制放大区域。

function setupMagnifier(image, canvas) {
  const ctx = canvas.getContext('2d');
  const zoomLevel = 2;
  const size = 100;

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

    ctx.drawImage(
      image,
      x - size/2, y - size/2, size, size,
      0, 0, size * zoomLevel, size * zoomLevel
    );
  });
}

使用第三方库实现高级效果

对于更复杂的需求，可以考虑使用专门的库：

安装 medium-zoom 示例：

import mediumZoom from 'medium-zoom';

mediumZoom('[data-zoomable]', {
  margin: 24,
  background: '#000',
  scrollOffset: 40
});

响应式图片放大处理

为确保在不同屏幕尺寸下正常工作，需要添加响应式处理：

js实现图片放大

function handleResponsiveZoom() {
  const imageWidth = document.getElementById('zoom-image').naturalWidth;
  const screenWidth = window.innerWidth;

  const maxScale = screenWidth < 768 ? 1.5 : 2.5;
  document.querySelector('.zoom-lens').style.setProperty('--scale', maxScale);
}

window.addEventListener('resize', handleResponsiveZoom);