JavaScript实现元素从中心缩放后保持原位置的问题求解

问题根因 #

你遇到的首次缩放偏移问题由两个核心错误导致：

• 你注释了transformOrigin配置，即使取消注释，原写法"50 50"缺少单位，无法正确指定元素中心作为缩放基点
• 鼠标离开事件的unZoom1函数逻辑错误，没有将缩放状态重置为原始比例，反而给元素设置了translate(0.5%)偏移，导致第一次触发hover后元素位置就发生了永久性偏移，后续缩放都会基于偏移后的位置计算

修复方案 #

方案1：优先用CSS实现（更简单稳定，无JS开销） #

直接给目标元素加CSS样式即可，不需要写JS逻辑：

#travel_img {
  /* 指定缩放基点为元素自身中心 */
  transform-origin: center;
  /* 加过渡让缩放更流畅 */
  transition: transform 0.3s ease;
}
#travel_img:hover {
  transform: scale(1.5);
}

方案2：修复原有JS逻辑 #

如果一定要用JS实现，调整后代码如下：

var fig1 = document.getElementById("travel_img");
// 初始化时就设置好缩放基点，不需要每次触发事件时重复设置
fig1.style.transformOrigin = "center";
// 用mouseenter替代mouseover，避免子元素冒泡触发多余事件
fig1.addEventListener("mouseenter", Zoom1);
fig1.addEventListener("mouseleave", unZoom1);

function Zoom1(){
  fig1.style.transform = "scale(1.5)";
}
function unZoom1(){
  // 鼠标离开时重置transform为初始状态即可
  fig1.style.transform = "scale(1)";
}

内容的提问来源于stack exchange，提问作者Kuuhaakuu