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 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
5 <title>简单动画</title>
6 <style type="text/css">
7 #message{background:red}
8 </style>
9
10 </head>
11 <body>
12 <div id="message">move</div>
13
14 <script type="text/javascript">
15
16 function positionMessage() {
17 var elem = document.getElementById("message");
18 elem.style.position = "absolute";
19 elem.style.left = "10px";
20 elem.style.top = "10px";
21 moveElement("message", 200, 200, 20);
22 }
23
24 addLoadEvent(positionMessage);
25
26 function moveElement(elementID, final_x, final_y, interval) {
27 var elem = document.getElementById(elementID);
28 var xpos = parseInt(elem.style.left);
29 var ypos = parseInt(elem.style.top);
30 if (elem.movement) {
31 clearTimeout(elem.movement);
32 }
33 var dist = 0;
34 if (xpos == final_x && ypos == final_y) {
35 return true;
36 }
37 if (xpos < final_x){
38 dist = Math.ceil((final_x - xpos) / 10);
39 xpos = xpos + dist;
40 }
41 if (xpos > final_x) {
42 dist = Math.ceil((xpos - final_x) / 10);
43 xpos = xpos - dist;
44 }
45 if (ypos < final_y) {
46 dist = Math.ceil((final_y - ypos) / 10);
47 ypos = ypos + dist;
48 }
49 if (ypos > final_y) {
50 dist = Math.ceil((ypos - final_y) / 10);
51 ypos = ypos - dist;
52 }
53 elem.style.left = xpos + "px";
54 elem.style.top = ypos + "px";
55 var repeat = "moveElement('"+elementID+"', "+final_x+", "+final_y+", "+interval+")";
56 elem.movement = setTimeout(repeat, interval);
57 }
58
59 function addLoadEvent(func) {
60 var oldonload = window.onload;
61 if(oldonload != "function"){
62 window.onload = func;
63 }else{
64 window.onload = function(){
65 oldonload();
66 func();
67 }
68 }
69 }
70 </script>
71
72 </body>
73 </html>
