1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 2 "http://www.w3.org/TR/html4/strict.dtd"> 3 4 <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> 5 <head> 6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 7 <title>12.自由落体</title> 8 <meta name="author" content="Administrator" /> 9 <!-- Date: 2014-12-15 --> 10 <style> 11 *{margin:0;padding:0} 12 #div1{width:100px;height:100px;position:absolute;background:red} 13 #line{width:1px;height:500px;background:#000000;position:absolute;left:500px;} 14 </style> 15 </head> 16 <body> 17 <div id="div1"></div> 18 <script> 19 var oDiv1=document.getElementById('div1'); 20 var timer=null; 21 var iSpeed=3;//因为速度在定时器里面要做加减运算,所以要放在全局 22 23 timer=setInterval(function(){ 24 iSpeed +=3; 25 var T= oDiv1.offsetTop + iSpeed ; 26 27 if( T > document.documentElement.clientHeight - oDiv1.offsetHeight ){ 28 T = document.documentElement.clientHeight - oDiv1.offsetHeight; 29 iSpeed *=-1; 30 iSpeed *=0.75 31 } 32 oDiv1.style.top = T +'px'; 33 34 if( oDiv1.offsetTop == document.documentElement.clientHeight - oDiv1.offsetHeight && Math.abs (iSpeed) < 1 ){ 35 clearInterval( timer ); 36 iSpeed=0 37 } 38 39 document.title= oDiv1.offsetTop +'-'+ iSpeed 40 41 },30) 42 43 </script> 44 </body> 45 </html>