gpt4 book ai didi

javascript - 我的 "div"正在从上到下移动(即距顶部 200 像素的高度)并固定在顶部(起始位置)。但我想固定在底部。我该怎么做?

转载 作者:行者123 更新时间:2023-11-28 14:15:12 25 4
gpt4 key购买 nike

我的 HTML div元素从 top 移动至bottom并修复 top ,但我想修复 bottom ,我的意思是,我想修复我的 div 200px来自top

   @keyframes mymove {
from {top: 0px;}
to {top: 200px;}
}
</style>
</head>
<body >
<input type="button" id="mybtn" onclick="myfunction()" value="click
me">
<div id="abc" style="display:none" >
<table>
<tr>
<td>Name:</td><td><input type="text"></td>
</tr>
</table>
</div>
</body>
</html>
<script>
function myfunction(){
document.getElementById("abc").style.display="block";
document.getElementById("abc").style.width="500px";
document.getElementById("abc").style.height="100px";
document.getElementById("abc").style.border="2px solid red";
document.getElementById("abc").style.position="absolute";
document.getElementById("abc").style.animation="mymove 1s";
document.getElementById("abc").style.marginTop="200px";
document.getElementById("mybtn").style.display="none";
}
</script>

我希望我的div元素来自topbottom并修复 bottom

最佳答案

您必须将forwards属性添加到您的动画中。所以你的脚本将如下所示。

 <script>
function myfunction(){
document.getElementById("abc").style.display="block";
document.getElementById("abc").style.width="500px";
document.getElementById("abc").style.height="100px";
document.getElementById("abc").style.border="2px solid red";
document.getElementById("abc").style.position="absolute";
document.getElementById("abc").style.animation="mymove 1s forwards"; //Here you add forwards
//document.getElementById("abc").style.marginTop="200px";
document.getElementById("mybtn").style.display="none";
}
</script>

关于javascript - 我的 "div"正在从上到下移动(即距顶部 200 像素的高度)并固定在顶部(起始位置)。但我想固定在底部。我该怎么做?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57798908/

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