標籤：-- ack 實現 產生 java lin 點擊 article var
實現自由落體運動需要理解的幾個簡單屬性：
clientHeight：瀏覽器用戶端整體高度
offsetHeight：對象（比如div）的高度
offsetTop：對象離用戶端最頂端的距離
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>free_movement</title> 6 <style type="text/css"> 7 #div1{ 8 position: absolute; 9 height: 100px; 10 width: 100px; 11 background: red; 12 } 13 </style> 14 <script type="text/javascript"> 15 window.onload=function () { 16 var btn=document.getElementById(‘btn‘); 17 var div1=document.getElementById(‘div1‘); 18 19 var Time=null; 20 var speed=0; 21 btn.onclick=function () { 22 startMove(); 23 } 24 25 function startMove () { 26 clearInterval(Time); //clearTnterval(Time)://防止多次點擊事件的產生27 Time=setInterval(function(){ 28 speed+= 3; 29 var T = div1.offsetTop + speed; 30 if(T > document.documentElement.clientHeight - div1.offsetHeight){ 31 T = document.documentElement.clientHeight - div1.offsetHeight; 32 speed *= -1; 33 speed *= 0.75; 34 } 35 div1.style.top=T+‘px‘; 36 }, 30) 37 } 38 } 39 </script> 40 </head> 41 <body> 42 <input type=‘button‘ value=‘開始運動‘ id="btn"> 43 <div id="div1"></div> 44 </body> 45 </html>
轉自：
javascript---之自由落體運動實現js實現自由落體
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
