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>