JS DOM 编程艺术(第2版)读书笔记第10章用JavaScript实现动画效果

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>