私のJavaScriptアニメーションで何が間違っていますか？

私はこのウェブページをデザインしています。私は、月のイメージを画面の下から上に上げたいと思っています。これはHTMLです：私のJavaScriptアニメーションで何が間違っていますか？

<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(); 
    } 
}

が、いくつかの理由のために、月のイメージは、ページの下部にとどまり、doesnのまったく動かない。何か案は？

出典

2016-12-18 Babak Accuracy

あなたはhttp://jsfiddle.net/から私たちのデモを与えることができます –

このようにしてください。スクリプトから、あるいは身体のonloadイベントのいずれかからあなたの月（）関数を呼び出す必要がありますので、

あなたはonloadイベントを持っていないmoon.offsetTop とのdivを使用してdiv要素のオフセットトップを計算する必要が

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>

出典

2016-12-18 12:24:19 Deep

私のJavaScriptアニメーションで何が間違っていますか？

答えて

関連する問題