所以我要设计这个网页，我希望月亮的图像从屏幕底部上升到顶部。这是 HTML :
<body>
<div id="Moon" onload="Moon()"></div>
</body>
CSS:
#Moon{
width: 150px;
height: 150px;
left: 50px;
top: 600px;
background: transparent url(../Img/Moon.SVG) no-repeat ;
position: absolute;
}
和用于动画的 JavaScript:
function Moon(){
var Moon=document.getElementById("Moon");
var yposition=Moon.style.top;
var id = setInterval(frame, 10);
function frame(){
if (Moon.style.top > 100) {
yposition--;
Moon.style.top = yposition + 'px';
} else {
clearInterval(id);
}
frame();
}
}
但由于某些原因，月亮的图像停留在页面底部，根本没有移动。有什么想法吗？
最佳答案
像这样尝试。
您需要使用 moon.offsetTop 计算 div 的顶部偏移量 并且 div 没有 onload 事件，因此您必须从脚本或 body onload 事件中调用 Moon() 函数
function Moon(){
var moon=document.getElementById("Moon");
var yposition= parseInt(moon.offsetTop) ;
var id = setInterval(frame, 10);
function frame()
{
if (moon.offsetTop > 10) {
yposition--;
document.getElementById("Moon").style.top = yposition + 'px';
} else {
clearInterval(id);
}
}
}#Moon{
width: 300px;
height: 250px;
left: 50px;
top: 600px;
background: transparent url("https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQh7mGmBMJ--wS711QkCEPHHS56jV15VmESttDbVLZPSI_FsMAyTQ") no-repeat ;
position: absolute;
}<body onload="Moon()">
<div id="Moon"></div>
</body>关于javascript - 我的 JavaScript 动画有什么问题？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41208187/