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>