js实现图片放大缩小

使用 CSS transform 实现缩放

通过修改 CSS 的 transform 属性实现图片缩放效果。这种方式性能较好，不会引起页面重排。

const img = document.getElementById('zoom-image');
let scale = 1;

function zoomIn() {
  scale += 0.1;
  img.style.transform = `scale(${scale})`;
}

function zoomOut() {
  if (scale > 0.1) {
    scale -= 0.1;
    img.style.transform = `scale(${scale})`;
  }
}

监听鼠标滚轮事件

通过监听鼠标滚轮事件实现滚动缩放效果，注意要阻止默认行为。

const img = document.getElementById('zoom-image');
let scale = 1;

img.addEventListener('wheel', (e) => {
  e.preventDefault();

  if (e.deltaY < 0) {
    scale += 0.1;
  } else {
    if (scale > 0.1) {
      scale -= 0.1;
    }
  }

  img.style.transform = `scale(${scale})`;
});

使用 Canvas 实现高级缩放

对于需要更复杂控制的场景，可以使用 Canvas 绘制并实现缩放功能。

const canvas = document.getElementById('zoom-canvas');
const ctx = canvas.getContext('2d');
const img = new Image();

img.onload = function() {
  ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
};

let scale = 1;

function zoom(factor) {
  scale *= factor;
  canvas.width = img.width * scale;
  canvas.height = img.height * scale;
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
}

实现拖拽和缩放结合

结合拖拽和缩放功能，提供更好的用户体验。

const img = document.getElementById('zoom-image');
let scale = 1;
let posX = 0;
let posY = 0;
let isDragging = false;
let startX, startY;

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;
  img.style.transform = `translate(${posX}px, ${posY}px) scale(${scale})`;
});

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

img.addEventListener('wheel', (e) => {
  e.preventDefault();
  const delta = e.deltaY < 0 ? 1.1 : 0.9;
  scale *= delta;
  img.style.transform = `translate(${posX}px, ${posY}px) scale(${scale})`;
});

使用第三方库

对于更复杂的需求，可以考虑使用专门的库如：

• panzoom：轻量级的平移缩放库
• medium-zoom：类似Medium网站的图片缩放效果
• viewerjs：功能全面的图片查看器

// 使用panzoom示例
const element = document.getElementById('zoom-image');
panzoom(element, {
  maxZoom: 5,
  minZoom: 0.5
});

以上方法可以根据具体需求选择使用，CSS transform 方案适合简单场景，Canvas 方案适合需要像素级控制的场景，第三方库则能快速实现复杂功能。