Question

所以我有这个网页设计，我想要一个月亮的图像从屏幕的底部上升到顶部。这是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();
    }
}

但由于某些原因，月球的图像停留在页面的底部而根本不移动。任何想法？

Answer 1

试试这样。

您需要使用 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动画有什么问题？

1 个答案: