我在div中放了一张图片.当我将鼠标移到div中时,图像应该每秒减少5%.我已经完成了这个 playbook ,但什么都没有发生.
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>
我正在试图找到一种方法来减少图像大小的5%,每一秒我进入div的鼠标.