鼠标进入，每秒缩小图像尺寸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);
  });
});

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

我正在尝试找到一种方法，让鼠标在 div 中输入时每秒将图像大小缩小 5%。

Answer 1

这里有几个问题：

• isOnDiv

  始终是

  false

  。

  mouseenter

  处理程序中的条件会立即检查

  true

  值，但从未找到该值，因此会在任何逻辑运行之前返回。
• 您将

  height

  的

  width

  和

  img

  设置为

  100%

  。对其中一项的更改不会产生任何影响。您需要设置其中一个值，并在缩小图像时动态销售图像。
• 不要使用变量来维持悬停状态。使用单独的

  mouseenter

  和

  mouseleave

  事件处理程序分别开始和结束间隔。

这是一个经过上述更改后的工作示例：

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

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

  let currentWidth = 100;
  let intervalId;

  div.addEventListener("mouseenter", () => {
    intervalId = setInterval(function() {
      currentWidth -= 5;
      img.style.width = currentWidth + "%";

      if (currentWidth <= 0) {
        clearInterval(intervalId);
      }
    }, 1000);
  });
  
  div.addEventListener('mouseleave', () => {
    clearInterval(intervalId);
    currentWidth = 100;
    img.style.width = "100%";
  }); 

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

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