鼠标进入时，每秒图像缩小5%。

Question

我将一张图片放入一个div中。当鼠标移动到这个div内时，图片应该每秒缩小5%。我已经写了这段脚本，但是没有产生任何效果。

document.addEventListener("DOMContentLoaded", (event) => {
  const element = document.getElementsByTagName("footer")[0];
  const div = element.getElementsByTagName("div")[0];
  var urlImg = "https://www.coding-academy.fr/wp-content/uploads/2017/10/CODING_LOGO_CMJN.png";

  var imagejavascript = document.createElement("img");
  imagejavascript.src = urlImg;
  imagejavascript.style.width = "100%";
  imagejavascript.style.height = "100%";
  div.appendChild(imagejavascript);

  const img = div.getElementsByTagName("img")[0];
  var isOnDiv = false;
  var currentHeight = 100;

  div.addEventListener("mouseenter", function() {
    if (isOnDiv) return;
    isOnDiv = true;

    var intervalId = setInterval(function() {
      currentHeight -= 5;
      img.style.height = currentHeight + "%";

      if (currentHeight <= 0) {
        clearInterval(intervalId);
        setTimeout(function() {
          isOnDiv = false;
          currentHeight = 100;
          img.style.height = "100%";
        }, 1000);
      }
    }, 1000);
  });

  div.addEventListener("click", function() {
    div.removeChild(img);
  });
});

我正在尝试寻找一种方法，在鼠标进入div时，使图片每秒缩小5%。

Raymond Hettinger · Answer

这段文本包含几个问题的解答及一个修正后的代码示例：

问题一：
当设置 img 元素的 height 和 width 都为 100% 时，仅改变其中一个值不会产生效果。你需要设定其中一个属性值，并确保图像随着该属性值的变化而动态缩放。在提供的代码中，只设置了宽度为百分比，高度没有提及，因此假设是保持自动适应。

问题二：
不要使用变量（如 isOnDiv）来维持鼠标悬停状态。应分别使用 mouseenter 和 mouseleave 事件处理器开始和结束定时器。

修正后的代码示例：
当文档加载完成后，脚本创建了一个 img 元素并将其附加到 footer 下的 div 元素内。img 图像的宽度被设置为 100%，以适应其容器宽度。同时，添加了鼠标悬停和离开事件监听器来控制图片大小变化的动画效果。当鼠标进入 div 时，启动一个定时器每秒减小图片宽度5%，直到宽度降至0为止；当鼠标离开时，清除定时器并将宽度恢复至100%。此外，还添加了一个点击事件监听器，用于清除定时器并移除图片元素。

以下是上述修改后代码的中文翻译版本：

document.addEventListener("DOMContentLoaded", (event) => {
  const footerElement = document.querySelector("footer");
  const divElement = footerElement.querySelector("div");

  const imgElement = document.createElement("img");
  imgElement.src = "https://www.coding-academy.fr/wp-content/uploads/2017/10/CODING_LOGO_CMJN.png";
  imgElement.style.width = "100%";
  divElement.appendChild(imgElement);

  let currentWidth = 100;
  let intervalIdentifier;

  const setSizeOfImage = (value) => imgElement.style.width = value + "%";

  divElement.addEventListener("mouseenter", () => {
    intervalIdentifier = setInterval(() => {
      currentWidth -= 5;
      setSizeOfImage(currentWidth);
      
      if (currentWidth <= 0) {
        clearInterval(intervalIdentifier);
      }
    }, 1000);
  });
  
  divElement.addEventListener('mouseleave', () => {
    clearInterval(intervalIdentifier);
    currentWidth = 100;
    setSizeOfImage(currentWidth);
  });

  divElement.addEventListener("click", function() {
    clearInterval(intervalIdentifier);
    divElement.removeChild(imgElement);
  });
});

// HTML 部分

Employed Russian · Answer

如果采用百分比设置元素的高度，那么只有在其父元素拥有固定高度的情况下才会生效。在您给出的情况中，父级

没有任何样式设定，因此对图片设置的宽度和高度样式将不起作用。

解决此问题的一个办法是首先将图片渲染到

中，接着将该

的高度和宽度设置为其当前计算得到的尺寸。您可以在将图片插入

后添加如下几行JavaScript代码实现这一目的：

// 在 div.appendChild(image) 之后执行以下操作

div.style.height = `${div.clientHeight}px`;
div.style.width = `${div.clientWidth}px`;

Reza Aghaei · Answer

您的代码几乎正确，但这里提供一种改进方案，无需大幅改动原始代码。您尝试使用标志变量 isOnDiv 是不恰当的，应该利用鼠标离开（mouseleave）事件。

以下是经过微调的代码：

window.addEventListener("DOMContentLoaded", (event) => {
    const footerElement = document.getElementsByTagName("footer")[0];
    const divElement = footerElement.getElementsByTagName("div")[0];
    let imageUrl = "https://www.coding-academy.fr/wp-content/uploads/2017/10/CODING_LOGO_CMJN.png";
    let intervalId;
    let imageElement = document.createElement("img");
    imageElement.src = imageUrl;
    imageElement.style.width = "100%";
    divElement.appendChild(imageElement);

    const imgRef = divElement.getElementsByTagName("img")[0];
    let currentWidth = 100;

    divElement.addEventListener("mouseenter", () => {
        intervalId = setInterval(() => {
            currentWidth -= 5;
            imgRef.style.width = currentWidth + "%";
            console.log({ currentWidth });
            if (currentWidth <= 0) {
                clearInterval(intervalId);
                setTimeout(() => {
                    currentWidth = 100;
                    imgRef.style.width = "100%";
                }, 1000);
            }
        }, 1000);
    });

    divElement.addEventListener("mouseleave", () => {
        clearInterval(intervalId);
        imgRef.style.width = "100%";
        currentWidth = 100;
    });

    divElement.addEventListener("click", function() {
        divElement.removeChild(imgElement);
    });
});