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 <title>文字移动</title>
5 <script type="text/javascript">
6
7 //初始化，给要移动的元素一个初始值，可理解为移动的起点
8 function prepareElement(){
9 var elem = document.getElementById("pp");
10 elem.style.position = "absolute"; //表示定位于相对于包含它的元素的指定坐标
11 elem.style.left = "0px";
12 elem.style.top = "0px";
13 }
14 function moveElement(elementId,final_x,final_y,interval){
15
16 //验证元素是否存在
17 if(!elementId) return false; //当elementId为空时对应值false，加！为真，则不再向下执行，
18
19 //获得指定元素
20 //var elem=document.getElementById(elementId);
21 var elem = document.getElementById(elementId);
22
23 //获得现在的坐标
24 var x=parseInt(elem.style.left);
25 var y=parseInt(elem.style.top);
26 //判断是否到了指定位置
27 if(x==final_x && y==final_y) return;
28 //没有到达时继续向执行
29 if(x>final_x){
30 x--;
31 }
32 if(x<final_x){
33 x++;
34 }
35 if(y>final_y){
36 y--;
37 }
38 if(y<final_y){
39 y++;
40 }
41
42 //修改坐标位置
43 elem.style.left=x+"px";
44 elem.style.top=y+"px";
45
46 //自己调自己，实现连续移动
47 js="moveElement('"+elementId+"',"+final_x+","+final_y+","+interval+")";
48 //此句代码很费解，elementId,final_x等是变量，所有要在引号外，
49 //而elementId加两层引号是因为elementId中传来的是字符串的变量
50 setTimeout(js,interval);
51 //setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。
52 //提示：setTimeout() 只执行 code 一次。
53 //如果要多次调用，请使用 setInterval() 或者让 code 自身再次调用 setTimeout()。
54
55 }
56
57 window.onload=function() {
58 prepareElement();
59 moveElement("pp",200,100,100);//括号中分别代表 元素ID，X移动多少，Y移动多少，多长时间完成移动
60 }
61 </script>
62 </head>
63 <body>
64 <p id="pp">我是一个移动元素 </p>
65
66 </body>
67 </html>
