当前位置：首页 > JavaScript

js实现图片放大

2026-01-16 12:06:26JavaScript

使用 CSS transform 实现图片放大

通过 CSS 的 transform: scale() 属性实现图片放大效果。当鼠标悬停时，图片会平滑放大。

const img = document.querySelector('img');
img.addEventListener('mouseenter', () => {
  img.style.transition = 'transform 0.3s ease';
  img.style.transform = 'scale(1.2)';
});
img.addEventListener('mouseleave', () => {
  img.style.transform = 'scale(1)';
});

使用 CSS zoom 属性

CSS 的 zoom 属性也可以实现简单的放大效果，但注意这个属性是非标准属性。

const img = document.querySelector('img');
img.addEventListener('mouseover', () => {
  img.style.zoom = '150%';
});
img.addEventListener('mouseout', () => {
  img.style.zoom = '100%';
});

创建放大镜效果

实现类似放大镜的效果，在鼠标位置显示放大后的图片区域。

js实现图片放大

const img = document.getElementById('zoom-img');
const lens = document.createElement('div');
lens.style.position = 'absolute';
lens.style.width = '100px';
lens.style.height = '100px';
lens.style.border = '1px solid #000';
lens.style.background = 'rgba(255, 255, 255, 0.3)';
lens.style.display = 'none';
document.body.appendChild(lens);

img.addEventListener('mousemove', (e) => {
  lens.style.display = 'block';
  lens.style.left = `${e.pageX - 50}px`;
  lens.style.top = `${e.pageY - 50}px`;

  const zoom = 2;
  const x = e.offsetX;
  const y = e.offsetY;
  img.style.transformOrigin = `${x}px ${y}px`;
  img.style.transform = `scale(${zoom})`;
});

img.addEventListener('mouseleave', () => {
  lens.style.display = 'none';
  img.style.transform = 'scale(1)';
});

使用第三方库实现高级放大

对于更复杂的放大效果，可以使用专门的 JavaScript 库如 zooming 或 medium-zoom。

安装 medium-zoom：

js实现图片放大

npm install medium-zoom

使用示例：

import mediumZoom from 'medium-zoom';

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

响应式图片放大

确保放大效果在不同屏幕尺寸下都能正常工作。

function setupImageZoom() {
  const images = document.querySelectorAll('.zoomable');

  images.forEach(img => {
    const originalWidth = img.naturalWidth;
    const originalHeight = img.naturalHeight;

    img.addEventListener('click', () => {
      const scale = Math.min(
        window.innerWidth / originalWidth,
        window.innerHeight / originalHeight
      ) * 0.9;

      img.style.transform = `scale(${scale})`;
      img.style.transition = 'transform 0.3s ease';
    });
  });
}

window.addEventListener('resize', setupImageZoom);
window.addEventListener('load', setupImageZoom);

触摸设备支持

为移动设备添加触摸支持的双击放大功能。

const img = document.querySelector('img');
let lastTap = 0;

img.addEventListener('touchend', (e) => {
  const currentTime = new Date().getTime();
  const tapLength = currentTime - lastTap;

  if (tapLength < 300 && tapLength > 0) {
    if (img.style.transform === 'scale(2)') {
      img.style.transform = 'scale(1)';
    } else {
      img.style.transform = 'scale(2)';
    }
    e.preventDefault();
  }
  lastTap = currentTime;
});