当前位置：首页 > JavaScript

js实现放大缩小

2026-01-16 13:27:33JavaScript

使用 CSS transform 实现缩放

通过修改元素的 transform 属性实现平滑缩放效果。CSS 的 scale() 函数可以轻松调整元素大小。

const element = document.getElementById('target');
let scale = 1;

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

function zoomOut() {
  scale = Math.max(0.1, scale - 0.1);
  element.style.transform = `scale(${scale})`;
}

监听鼠标滚轮事件

通过监听 wheel 事件实现滚轮缩放，需要注意阻止默认行为避免页面滚动。

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

container.addEventListener('wheel', (e) => {
  e.preventDefault();
  scale += e.deltaY * -0.01;
  scale = Math.min(Math.max(0.1, scale), 4);
  container.style.transform = `scale(${scale})`;
});

使用 viewport 实现页面级缩放

通过修改 meta viewport 实现整个页面的缩放，适合移动端网页。

let viewportScale = 1;

function setViewportScale(scale) {
  document.querySelector('meta[name=viewport]')
    .setAttribute('content', `width=device-width, initial-scale=${scale}`);
}

function zoomIn() {
  viewportScale += 0.1;
  setViewportScale(viewportScale);
}

function zoomOut() {
  viewportScale = Math.max(0.5, viewportScale - 0.1);
  setViewportScale(viewportScale);
}

使用 Canvas 实现绘图缩放

在 Canvas 绘制场景时，可以通过 scale() 方法实现图形缩放。

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
let scale = 1;

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.save();
  ctx.scale(scale, scale);
  // 绘制内容
  ctx.fillRect(50, 50, 100, 100);
  ctx.restore();
}

function zoom(factor) {
  scale *= factor;
  draw();
}

响应式缩放实现

结合 CSS 媒体查询和 JavaScript 实现响应式缩放，根据窗口大小自动调整。

function responsiveZoom() {
  const baseWidth = 1920; // 设计基准宽度
  const currentWidth = window.innerWidth;
  const scale = currentWidth / baseWidth;
  document.documentElement.style.transform = `scale(${scale})`;
}

window.addEventListener('resize', responsiveZoom);
responsiveZoom(); // 初始化

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

考虑使用专门的缩放库如 panzoom 或 zoom.js 实现更复杂的功能。

// 使用 panzoom 示例
import panzoom from 'panzoom';

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

每种方法适用于不同场景，CSS transform 适合单个元素，viewport 适合整个页面，Canvas 适合图形处理，第三方库提供更完善的交互功能。根据具体需求选择合适方案，注意性能优化和用户体验。

js实现放大缩小