解决反复调用程序时变量的问题
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=utf-8" />
5 <title>移动对象</title>
6 <script language="javascript">
7 function moveElement(elementID , finalX , finalY , interval){
8 if(!document.getElementById) return false;
9 if(!document.getElementById(elementID)) return false;
10
11 var elem = document.getElementById(elementID);
12
13 if(elem.movement) //这里是重点，当元素的属性已经存在时就先清除计时器，否则无动作
14 clearTimeout(elem.movement);
15
16 var xpos = parseInt(elem.style.left);
17 var ypos = parseInt(elem.style.top);
18 //alert(xpos);
19 if(xpos==finalX && ypos==finalY)
20 return true;
21 if(xpos < finalX) xpos++;
22 if(xpos > finalX) xpos--;
23 if(ypos < finalY) ypos++;
24 if(ypos > finalY) ypos--;
25
26 elem.style.left = xpos + "px";
27 elem.style.top = ypos + "px";
28
29 var repeat = "moveElement('" + elementID + "'," + finalX + "," + finalY + "," + interval + ")";
30 elem.movement = setTimeout(repeat , interval);
31 }
32
33 function positionMessage(msg , startPx , endPx , startPy , endPy , interval){
34 if(!document.getElementById) return false;
35 if(!document.getElementById(msg)) return false;
36 var elem = document.getElementById(msg);
37
38 elem.style.position = "absolute";
39 elem.style.left = startPx + "px";
40 elem.style.top = startPy + "px";
41 //alert(elem.style.left);
42 moveElement(msg , endPx , endPy , interval);
43 }
44
45 function prepareSlideshow(){
46 var preview = document.getElementById("preview");
47 preview.style.position = "absolute";
48 preview.style.left = "0px";
49 preview.style.top = "0px";
50
51 var list = document.getElementById("linklist");
52 var links = list.getElementsByTagName("a");
53 links[0].onmouseover = function(){
54 moveElement("preview",-100,0,10);
55 }
56 links[1].onmouseover = function(){
57 moveElement("preview",-200,0,10);
58 }
59 links[2].onmouseover = function(){
60 moveElement("preview",-300,0,10);
61 }
62
63 }
64 </script>
65
66 <style type="text/css">
67 #slideshow{
68 width:500px;
69 height:500px;
70 position:relative;
71 overflow:hidden;
72 }
73 </style>
74 </head>
75
76 <body>
77 <p id="message">Message</p>
78 <p id="message2">Message</p>
79 <h1>Web Design</h1>
80 <p>These are the things you should know.</p>
81 <ol id="linklist">
82 <li><a href="a.html">aaaa</a></li>
83 <li><a href="b.html">bbbb</a></li>
84 <li><a href="c.html">cccc</a></li>
85 </ol>
86 <div id="slideshow">
87 <img src="images/1a.jpg" alt="something" id="preview" />
88 </div>
89
90 <script language="javascript">
91 positionMessage("message" , 0 , 350 , 0 , 278 , 10);
92 positionMessage("message2" , 50 , 315 , 50 , 361 , 10);
93 prepareSlideshow();
94 </script>
95 </body>
96 </html>
97 因为如果用全局变量，反复触发一个事件的时候会出现速度加快的现象，所以把那个变量设置为被移动元素的属性就解决了这个问题
98
