当前位置：首页 > JavaScript

js实现图片放大效果

2026-03-01 03:11:09JavaScript

使用CSS Transform实现图片放大

通过CSS的transform: scale()属性实现平滑放大效果，结合transition添加动画过渡。鼠标悬停时触发放大，移出时恢复原状。

<style>
  .zoom-img {
    transition: transform 0.3s ease;
    width: 300px;
  }
  .zoom-img:hover {
    transform: scale(1.2);
  }
</style>
<img src="image.jpg" class="zoom-img">

通过JavaScript动态控制放大倍数

使用事件监听实现更灵活的交互控制，可自定义放大倍数和触发方式。

js实现图片放大效果

const img = document.querySelector('img');
img.addEventListener('mouseenter', () => {
  img.style.transform = 'scale(1.5)';
});
img.addEventListener('mouseleave', () => {
  img.style.transform = 'scale(1)';
});

实现点击放大镜效果

创建遮罩层实现局部放大效果，适合产品细节展示场景。

js实现图片放大效果

const container = document.querySelector('.image-container');
const lens = document.createElement('div');
lens.className = 'zoom-lens';
container.appendChild(lens);

container.addEventListener('mousemove', (e) => {
  const { left, top, width, height } = container.getBoundingClientRect();
  const x = (e.clientX - left) / width * 100;
  const y = (e.clientY - top) / height * 100;
  lens.style.transform = `translate(-50%, -50%) scale(2)`;
  lens.style.backgroundPosition = `${x}% ${y}%`;
});

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

引入medium-zoom等专业库快速实现响应式放大镜功能。

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

移动端触摸缩放支持

通过touch事件实现双指缩放交互，需计算两点距离变化。

let initialDistance = null;
img.addEventListener('touchstart', (e) => {
  if (e.touches.length === 2) {
    initialDistance = getDistance(e.touches[0], e.touches[1]);
  }
});

img.addEventListener('touchmove', (e) => {
  if (e.touches.length === 2) {
    const currentDistance = getDistance(e.touches[0], e.touches[1]);
    const scale = currentDistance / initialDistance;
    img.style.transform = `scale(${scale})`;
  }
});