鼠标移入div时图片每秒缩小5%功能失效求助

问题根源分析 #

1. 承载图片的<div>未设置明确宽高：图片的百分比尺寸依赖父元素的尺寸基准，父元素高度为0时，height: 100%无法生效，导致看不到缩小效果。
2. 直接修改height属性会破坏图片宽高比，造成变形。
3. 缺少鼠标移出事件处理：若鼠标在缩小过程中离开Div，定时器会持续执行，引发逻辑混乱。

修复方案与完整代码 #

HTML

<footer>
  <div></div>
</footer>

CSS

footer div {
  width: 300px;
  height: 200px;
  border: 1px solid #ccc; /* 可选，方便观察Div范围 */
  overflow: hidden; /* 防止图片缩放后超出Div */
}

footer div img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* 强制保持图片原始比例 */
}

JavaScript

document.addEventListener("DOMContentLoaded", (event) => {
  const div = document.querySelector("footer div");
  const imgUrl = "https://www.coding-academy.fr/wp-content/uploads/2017/10/CODING_LOGO_CMJN.png";

  // 创建并插入图片
  const img = document.createElement("img");
  img.src = imgUrl;
  div.appendChild(img);

  let intervalId = null;
  let currentScale = 1; // 初始缩放比例为100%

  // 鼠标移入触发缩小逻辑
  div.addEventListener("mouseenter", () => {
    if (intervalId) return; // 避免重复触发定时器

    intervalId = setInterval(() => {
      currentScale *= 0.95; // 每次缩小为当前尺寸的95%
      img.style.transform = `scale(${currentScale})`;

      // 缩放接近0时停止并重置
      if (currentScale <= 0.05) {
        clearInterval(intervalId);
        intervalId = null;
        setTimeout(() => {
          currentScale = 1;
          img.style.transform = `scale(${currentScale})`;
        }, 1000);
      }
    }, 1000);
  });

  // 鼠标移出时停止缩放
  div.addEventListener("mouseleave", () => {
    if (intervalId) {
      clearInterval(intervalId);
      intervalId = null;
      // 可选：鼠标移出后立即重置图片
      // currentScale = 1;
      // img.style.transform = `scale(${currentScale})`;
    }
  });

  // 点击移除图片
  div.addEventListener("click", () => {
    div.removeChild(img);
  });
});

关键修改说明 #

• 给Div设置固定宽高，为图片提供明确的缩放基准。
• 使用transform: scale()替代修改height属性，既保持宽高比，又比直接修改尺寸性能更优。
• 新增mouseleave事件处理，防止鼠标离开后定时器持续执行。
• 用缩放比例的乘法计算（currentScale *= 0.95）实现“每秒缩小5%”的逻辑，更符合实际需求。

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