js原声实现缩放

使用 CSS transform 实现缩放

通过修改元素的 transform 属性实现缩放效果。这种方式不会影响页面布局，适合交互式缩放。

const element = document.getElementById('target');
element.style.transform = 'scale(1.5)'; // 放大1.5倍
element.style.transformOrigin = 'center center'; // 设置缩放中心点

修改元素尺寸实现缩放

直接改变元素的宽高属性实现缩放，会影响页面文档流。

const element = document.getElementById('target');
const originalWidth = element.offsetWidth;
const originalHeight = element.offsetHeight;

// 放大到150%
element.style.width = (originalWidth * 1.5) + 'px';
element.style.height = (originalHeight * 1.5) + 'px';

鼠标滚轮交互缩放

监听鼠标滚轮事件实现动态缩放效果。

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

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

动画缓动缩放效果

使用 requestAnimationFrame 实现平滑的缩放动画。

function animateScale(element, targetScale, duration = 300) {
  const startScale = parseFloat(element.style.transform.replace('scale(', '')) || 1;
  const startTime = performance.now();

  function update(currentTime) {
    const elapsed = currentTime - startTime;
    const progress = Math.min(elapsed / duration, 1);
    const currentScale = startScale + (targetScale - startScale) * progress;

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

    if (progress < 1) {
      requestAnimationFrame(update);
    }
  }

  requestAnimationFrame(update);
}

双指触摸缩放

处理触摸事件实现移动端双指缩放。

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

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

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

保持宽高比的缩放计算

在改变尺寸时保持元素原始宽高比。

function scaleWithAspectRatio(element, scaleFactor) {
  const originalWidth = element.offsetWidth;
  const originalHeight = element.offsetHeight;
  const aspectRatio = originalWidth / originalHeight;

  if (aspectRatio > 1) { // 宽大于高
    element.style.width = (originalWidth * scaleFactor) + 'px';
    element.style.height = 'auto';
  } else { // 高大于宽
    element.style.height = (originalHeight * scaleFactor) + 'px';
    element.style.width = 'auto';
  }
}