JS垂直落体回弹原理

浏览数：21 / 时间：2015年06月09日

 1 /*
 2 *JS垂直落体回弹原理
 3 */
 4 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 5 <html xmlns="http://www.w3.org/1999/xhtml">
 6 <head>
 7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 8 <title>无标题文档</title>
 9 <style type="text/css">
10 #div1{ width:100px; height:100px; position:absolute; background:red;}
11 </style>
12 
13 <script type="text/javascript">
14 window.onload = function(){
15     var oBtn = document.getElementById("btn");
16     oBtn.onclick = function (){
17         startMove("div1",15);    
18     }    
19     function startMove(id,n1){
20         var oDiv = document.getElementById(id);
21         var iSpeed = 0;
22         setInterval(function (){
23             iSpeed +=n1;
24             var t = oDiv.offsetTop + iSpeed;
25             document.title = t + " , " + iSpeed;
26             console.log(iSpeed);
27             if(t > document.documentElement.clientHeight - oDiv.offsetHeight){
28                 t = document.documentElement.clientHeight - oDiv.offsetHeight;
29                 iSpeed *= -1;
30                 iSpeed *=0.75;
31             }
32             oDiv.style.top = t + "px";
33         },30);
34     }    
35 }
36 </script>
37 
38 </head>
39 
40 <body>
41 
42 <input type="button" value="运动" id="btn" />
43 <div id="div1"></div>
44 
45 </body>
46 </html>