当前位置：首页 > JavaScript

js实现放大缩小

2026-02-28 23:21:20JavaScript

实现图片放大缩小功能

通过监听鼠标滚轮事件或点击按钮控制图片的缩放比例，结合CSS的transform: scale()属性实现平滑缩放效果。

const img = document.getElementById('zoomImage');
let scale = 1;

// 鼠标滚轮缩放
img.addEventListener('wheel', (e) => {
  e.preventDefault();
  scale += e.deltaY * -0.01;
  scale = Math.min(Math.max(0.1, scale), 4); // 限制缩放范围
  img.style.transform = `scale(${scale})`;
});

// 按钮控制缩放
document.getElementById('zoomIn').addEventListener('click', () => {
  scale += 0.1;
  img.style.transform = `scale(${scale})`;
});

document.getElementById('zoomOut').addEventListener('click', () => {
  scale -= 0.1;
  img.style.transform = `scale(${scale})`;
});

使用transform-origin控制缩放中心点

默认缩放以元素中心为原点，可通过CSS调整缩放基准点：

#zoomImage {
  transform-origin: 0 0; /* 左上角作为缩放原点 */
  transition: transform 0.1s ease; /* 添加平滑过渡 */
}

结合拖拽功能的缩放实现

在缩放的同时保持拖拽功能，需同步处理位移和缩放参数：

let posX = 0, posY = 0, isDragging = false;

img.addEventListener('mousedown', (e) => {
  isDragging = true;
  startX = e.clientX - posX;
  startY = e.clientY - posY;
});

window.addEventListener('mousemove', (e) => {
  if (!isDragging) return;
  posX = e.clientX - startX;
  posY = e.clientY - startY;
  updateTransform();
});

window.addEventListener('mouseup', () => isDragging = false);

function updateTransform() {
  img.style.transform = `translate(${posX}px, ${posY}px) scale(${scale})`;
}

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

对于复杂场景可考虑使用专用库：

panzoom：支持平移和缩放
medium-zoom：类似Medium的图片放大效果

安装并使用panzoom的示例：

import panzoom from 'panzoom';

const element = document.getElementById('zoomContainer');
panzoom(element, {
  maxZoom: 4,
  minZoom: 0.5,
  smoothScroll: false
});

移动端触摸缩放实现

通过Touch事件实现多点触控缩放：

let initialDistance = 0;

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]);
    scale *= currentDistance / initialDistance;
    scale = Math.min(Math.max(0.1, scale), 4);
    img.style.transform = `scale(${scale})`;
    initialDistance = currentDistance;
  }
});

function getDistance(touch1, touch2) {
  return Math.hypot(
    touch2.clientX - touch1.clientX,
    touch2.clientY - touch1.clientY
  );
}

js实现放大缩小