我的JavaScript動畫怎么了？

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 個解決方案

解決方案1
1 已采納 2016-12-18 12:24:19

我的JavaScript動畫怎么了？

問題描述

1 個解決方案

解決方案1 1 已采納 2016-12-18 12:24:19

解決方案1
1 已采納 2016-12-18 12:24:19