gpt4 book ai didi

javascript - 如何使用javascript缓慢增加div的高度

转载 作者:太空宇宙 更新时间:2023-11-04 01:19:13 26 4
gpt4 key购买 nike

我必须创建一个黑色背景的网页,它应该有一个红色的 div,当我们将鼠标悬停在那个红色的 div 上时,div 的高度应该慢慢增加到页面顶部,当你删除你的鼠标从 div 开始,高度应该以增加的速度减少。下面是我的代码:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>animate</title>
<script>

function changeHeight() {
$('#first').animate({height:500},500);
}

</script>
</head>

<body style="background-color: black">
<div id="first" style="background-color: red; width: 10%; height: 50px" onMouseOver="changeHeight();"></div>

</body>
</html>

最佳答案

哈哈。

html,body
{
padding: 0;
background: black;
}
div
{
background: red;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 20px;
transition: all linear 5s;
}
div:hover
{
height: 100%;
}
<div></div>


如果你想假装使用 JavaScript,因为练习需要它:

const div = document.querySelector("div");
div.addEventListener("mouseenter", () => div.classList.add("hover"));
div.addEventListener("mouseleave", () => div.classList.remove("hover"));
html,body
{
padding: 0;
background: black;
}
div
{
background: red;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 20px;
transition: all linear 5s;
}
div.hover
{
height: 100%;
}
<div></div>

关于javascript - 如何使用javascript缓慢增加div的高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49477662/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com