抛物线

 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>13.抛物线</title>
 8         <meta name="author" content="Administrator" />
 9         <!-- Date: 2014-12-15 -->
10         <style>
11             *{margin:0;padding:0}
12             #div1{width:50px;height:50px;position:absolute;background:red;top:500px;left:100px;}
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 iSpeedX=10;//x轴是匀速
22              var iSpeedY=-40;//y轴是减速 加速交替
23              
24              
25              timer=setInterval(function(){
26                      iSpeedY +=3;
27                      var T= oDiv1.offsetTop + iSpeedY ;
28                       
29                      if( T > document.documentElement.clientHeight - oDiv1.offsetHeight ){
30                          T = document.documentElement.clientHeight - oDiv1.offsetHeight;
31                          iSpeedY *=-1;
32                          iSpeedY *=0.75;
33                          iSpeedX *=0.75;
34                      }
35                      oDiv1.style.top = T +'px';
36                      oDiv1.style.left = oDiv1.offsetLeft + iSpeedX +'px';
37                      
38                      if( oDiv1.offsetTop ==  document.documentElement.clientHeight - oDiv1.offsetHeight && Math.abs (iSpeedY) < 1 ){
39                           clearInterval( timer );
40                           iSpeedY=0
41                      }
42                      
43                      document.title= oDiv1.offsetTop +'-'+ iSpeedY
44                      
45              },30)
46              
47         </script>
48     </body>
49 </html>