当前位置：首页 > JavaScript

js 实现图片放大

2026-04-03 22:26:04JavaScript

使用 CSS transform 实现图片放大

通过 CSS 的 transform: scale() 属性可以实现图片放大效果。结合 JavaScript 监听鼠标事件来控制放大比例。

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

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

使用 CSS zoom 属性

虽然 zoom 不是标准属性，但在某些场景下可以使用。注意浏览器兼容性问题。

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

创建放大镜效果

实现局部放大的效果，需要创建一个跟随鼠标的放大区域。

const img = document.getElementById('zoom-img');
const lens = document.createElement('div');
lens.className = 'img-zoom-lens';
img.parentElement.insertBefore(lens, img);

img.addEventListener('mousemove', (e) => {
  const { left, top, width, height } = img.getBoundingClientRect();
  const x = e.pageX - left;
  const y = e.pageY - top;

  lens.style.display = 'block';
  lens.style.left = `${x - 50}px`;
  lens.style.top = `${y - 50}px`;
  lens.style.backgroundImage = `url(${img.src})`;
  lens.style.backgroundSize = `${width * 2}px ${height * 2}px`;
  lens.style.backgroundPosition = `-${x * 2 - 50}px -${y * 2 - 50}px`;
});

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

对应 CSS:

.img-zoom-lens {
  position: absolute;
  width: 100px;
  height: 100px;
  border: 1px solid #ddd;
  border-radius: 50%;
  pointer-events: none;
  display: none;
  background-repeat: no-repeat;
}

使用第三方库

考虑使用专门的图片放大库如 zooming 或 medium-zoom 可以简化实现。

安装 zooming:

npm install zooming

使用示例:

import Zooming from 'zooming';

const zooming = new Zooming({
  bgColor: '#000',
  bgOpacity: 0.9
});

zooming.listen('.zoomable-image');

响应式图片放大

针对不同屏幕尺寸调整放大比例，确保良好的用户体验。

js 实现图片放大

function responsiveZoom() {
  const img = document.querySelector('img');
  const scale = window.innerWidth < 768 ? 1.2 : 1.5;

  img.addEventListener('mouseenter', () => {
    img.style.transform = `scale(${scale})`;
  });

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

window.addEventListener('resize', responsiveZoom);
responsiveZoom();