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>
