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>
