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>
