js实现图片放大缩小

实现图片放大缩小的基本方法

使用JavaScript实现图片放大缩小可以通过多种方式完成，以下是一些常见的方法：

监听鼠标滚轮事件
通过监听鼠标滚轮事件（wheel），动态调整图片的缩放比例。事件对象中的deltaY属性可以判断滚轮方向。

const img = document.getElementById('zoomable-image');
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})`;
});

通过按钮控制缩放
添加放大和缩小按钮，通过点击事件调整图片的transform属性。

const img = document.getElementById('zoomable-image');
const zoomInBtn = document.getElementById('zoom-in');
const zoomOutBtn = document.getElementById('zoom-out');
let scale = 1;

zoomInBtn.addEventListener('click', () => {
  scale += 0.1;
  img.style.transform = `scale(${scale})`;
});

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

支持拖拽移动的放大缩小

如果需要支持拖拽移动放大后的图片，可以结合mousedown、mousemove和mouseup事件实现。

const img = document.getElementById('zoomable-image');
let isDragging = false;
let startX, startY, translateX = 0, translateY = 0;

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

document.addEventListener('mousemove', (e) => {
  if (!isDragging) return;
  translateX = e.clientX - startX;
  translateY = e.clientY - startY;
  img.style.transform = `translate(${translateX}px, ${translateY}px) scale(${scale})`;
});

document.addEventListener('mouseup', () => {
  isDragging = false;
});

使用第三方库简化实现

如果需要更复杂的功能（如手势缩放），可以使用第三方库如Hammer.js或panzoom。

使用panzoom库示例
安装库后，通过简单的初始化实现拖拽和缩放。

import panzoom from 'panzoom';

const img = document.getElementById('zoomable-image');
panzoom(img, {
  maxZoom: 4,
  minZoom: 0.1
});

响应式设计的注意事项

确保图片在缩放时不会超出容器边界，可以通过CSS限制图片的显示范围。

#zoomable-image {
  max-width: 100%;
  transform-origin: 0 0;
  cursor: grab;
}

移动端手势支持

在移动设备上，可以通过监听touch事件实现类似功能。

let initialDistance = 0;

img.addEventListener('touchstart', (e) => {
  if (e.touches.length === 2) {
    initialDistance = Math.hypot(
      e.touches[0].clientX - e.touches[1].clientX,
      e.touches[0].clientY - e.touches[1].clientY
    );
  }
});

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