如何用JavaScript实现浏览器式缩放效果？

原代码的问题在于每次缩放时直接设置transform-origin为容器内的鼠标坐标，但缩放后图片的实际尺寸已经改变，这个坐标不再对应图片上的正确位置，导致焦点偏移。更可靠的方式是固定transform-origin，通过平移+缩放的组合来实现围绕鼠标点缩放，确保焦点始终准确。

修改后的完整代码 #

HTML

<div class="container">
  <img src="https://picsum.photos/id/200/600/200">
</div>

CSS

.container {
  width: 600px;
  height: 200px;
  margin: auto;
  border: 1px solid gray;
  overflow: hidden;
  position: relative;
}

img {
  position: absolute;
  transform-origin: 0 0;
  transform: translate(0, 0) scale(1.0);
}

JavaScript

const container = document.querySelector(".container");
const img = container.querySelector("img");

let scale = 1.0;
let tx = 0;
let ty = 0;

container.addEventListener('wheel', function (ev) {
  if (!ev.ctrlKey) return;
  ev.preventDefault();

  // 获取容器和图片的当前位置信息
  const containerRect = container.getBoundingClientRect();
  // 鼠标在容器内的坐标
  const mouseX = ev.clientX - containerRect.left;
  const mouseY = ev.clientY - containerRect.top;

  // 计算鼠标在图片原始尺寸上的相对位置（消除当前缩放和平移的影响）
  const imgOriginalWidth = img.naturalWidth;
  const imgOriginalHeight = img.naturalHeight;
  const relativeX = (mouseX - tx) / scale;
  const relativeY = (mouseY - ty) / scale;

  // 更新缩放比例，限制范围避免过度缩放
  scale += ev.deltaY * -0.005;
  scale = Math.max(0.5, Math.min(scale, 3));

  // 计算新的平移量，让鼠标位置保持在原地
  tx = mouseX - relativeX * scale;
  ty = mouseY - relativeY * scale;

  // 应用变换
  img.style.transform = `translate(${tx}px, ${ty}px) scale(${scale})`;
});

核心思路说明 #

• 固定transform-origin为图片左上角（0 0），避免修改原点导致的元素移位
• 记录当前的平移偏移量tx、ty和缩放比例scale
• 每次缩放时，先计算鼠标点在图片原始尺寸上的相对位置，消除当前缩放和平移的干扰
• 更新缩放比例后，重新计算平移量，确保鼠标点对应的图片位置始终显示在鼠标当前位置，实现精准的聚焦缩放

内容的提问来源于stack exchange，提问作者S. Elliot Perez