当前位置：首页 > JavaScript

js原声实现缩放

2026-04-04 15:19:25JavaScript

使用CSS transform实现缩放

通过修改元素的transform属性实现缩放效果。CSS的scale()函数可以调整元素的大小，结合JavaScript动态控制缩放比例。

const element = document.getElementById('target');
element.style.transform = 'scale(1.5)'; // 放大1.5倍

监听鼠标滚轮事件

通过监听wheel事件实现滚动缩放。计算滚轮滚动的方向，动态调整缩放比例。

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

element.addEventListener('wheel', (e) => {
  e.preventDefault();
  scale += e.deltaY * -0.01; // 调整缩放速度
  scale = Math.min(Math.max(0.5, scale), 4); // 限制缩放范围
  element.style.transform = `scale(${scale})`;
});

使用手势事件实现触摸缩放

对于触摸设备，可以通过touchstart、touchmove和touchend事件实现捏合缩放。计算两个触摸点之间的距离变化来调整缩放比例。

const element = document.getElementById('target');
let initialDistance = null;
let currentScale = 1;

element.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
    );
  }
});

element.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
    );
    const scaleFactor = currentDistance / initialDistance;
    currentScale = Math.min(Math.max(0.5, scaleFactor), 4);
    element.style.transform = `scale(${currentScale})`;
  }
});

动画过渡效果

为缩放添加平滑的过渡效果，可以通过CSS的transition属性实现。

#target {
  transition: transform 0.2s ease;
}

限制缩放范围

为了防止缩放过大或过小，需要设置缩放的最小和最大值。

const minScale = 0.5;
const maxScale = 4;
scale = Math.min(Math.max(minScale, scale), maxScale);

重置缩放

提供一个方法将元素重置到原始大小。

function resetScale() {
  scale = 1;
  element.style.transform = 'scale(1)';
}

兼容性处理

考虑不同浏览器的事件兼容性，可能需要添加前缀或使用polyfill。

const wheelEvent = 'onwheel' in document ? 'wheel' : 
                  'onmousewheel' in document ? 'mousewheel' : 'DOMMouseScroll';
element.addEventListener(wheelEvent, handleWheel);