1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <style>
5 #div1 {width:100px; height:100px; background:red; position:absolute;}
6 </style>
7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
8 <title>无标题文档</title>
9 <script>
10 var iSpeedX=1000;
11 var iSpeedY=0;
12
13 function startMove()
14 {
15 setInterval(function (){
16 var oDiv=document.getElementById('div1');
17
18 iSpeedY+=3;
19
20 var l=oDiv.offsetLeft+iSpeedX;
21 var t=oDiv.offsetTop+iSpeedY;
22
23 if(t>=document.documentElement.clientHeight-oDiv.offsetHeight)
24 {
25 iSpeedY*=-0.8;
26 iSpeedX*=0.8;
27 t=document.documentElement.clientHeight-oDiv.offsetHeight;
28 }
29 else if(t<=0)
30 {
31 iSpeedY*=-1;
32 iSpeedX*=0.8;
33 t=0;
34 }
35
36 if(l>=document.documentElement.clientWidth-oDiv.offsetWidth)
37 {
38 iSpeedX*=-0.8;
39 l=document.documentElement.clientWidth-oDiv.offsetWidth;
40 }
41 else if(l<=0)
42 {
43 iSpeedX*=-0.8;
44 l=0;
45 }
46
47 if(Math.abs(iSpeedX)<1)
48 {
49 iSpeedX=0;
50 }
51
52 if(Math.abs(iSpeedY)<1)
53 {
54 iSpeedY=0;
55 }
56
57 oDiv.style.left=l+'px';
58 oDiv.style.top=t+'px';
59 console.log("--"+iSpeedY)
60 document.title=iSpeedX;
61 }, 30);
62 }
63 </script>
64 </head>
65
66 <body>
67 <input type="button" value="开始运动" onclick="startMove()" />
68 <div id="div1">
69 </div>
70 </body>
71 </html>
