【菜瓜乱学，JavaScript DOM篇，0002期】 —— 自己编写一个网页元素移动的动画函数 moveElement

snake_hand

浏览: 573855 次

最近访客更多访客>>

u012363178

Netpet_11

tsaowe

zhuxinyu

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

学习自JavaScript DOM编程艺术第二版

-------编程小孩

函数部分代码如下：

学习过程中遇到的难点：setTimeout()用法错误，导致函数正常递归了，时间控制却没有起作用,debug的我崩溃了好多次哇……%>_<%

疑点:clearTimeout的运用,copy自书中源代码没搞明白到底为啥要那样用,但不那样用,在快速点击小方块后,就会出同时出现多个setTimeout,使得小方块既向左又向右运动,不伦

不类,明显是bug

setTimeout正确用法

//方法1

setTimeout（'func()',interval）;

//方法2

setTimeout(function(){func();},interval)

 1 /*
 2  * created by 编程小孩
 3  *
 4  * date: 26th,Feb,2013
 5  *
 6  * 说明：此函数包含 4 个参数 elemId代表要移动的元素的id
 7  * 
 8  * final_x,final_y 分别代表要移动的最终位置的横、纵坐标
 9  * 
10  * interval 代表每一小步的移动间隔时间,单位ms
11  * 
12  * 移动过程由递归实现,利用setTimeout实现时间控制
13  *
14  */
15 
16 function moveElement(elemId,final_x,final_y,interval){
17     //兼容性验证
18     if(!document.getElementById(elemId)){
19         alert("oops，未找到此元素!");
20         return false;
21     }
22     
23     var elem=document.getElementById(elemId);
24     if(!elem.style.position || !elem.style.top || !elem.style.left){
25         elem.style.position="absolute";
26         elem.style.top="0";
27         elem.style.left="0";        
28     }
29     
30     //清除setTimeout定时器
31     if(elem.movement) clearTimeout(elem.movement);
32     
33     //获得元素初始x，y坐标，parseInt转换结果为整型
34     var pos_x=parseInt(elem.style.left),
35         pos_y=parseInt(elem.style.top);
36         
37     if(pos_x==final_x && pos_y==final_y){
38         return true;
39     } 
40     
41     var dist_x=final_x-pos_x,
42         dist_y=final_y-pos_y;
43     
44     if(pos_x!=final_x){//x未到达
45         if(dist_x>=0){
46             //相差距离为正，则用ceil去大于浮点数的最近整型
47             //例:Math.ceil(0.9)=1
48             //最小增加1像素
49             pos_x+=Math.ceil(dist_x/10);
50         }
51         else{
52             //相差距离为负，则用floor取小于浮点数的最近整型
53             //例:Math.ceil(-0.9)=-1
54             //最小增加-1像素
55             pos_x+=Math.floor(dist_x/10);
56         }
57     }
58 
59     if(pos_y!=final_y){//y未到达
60         if(dist_y>=0){
61             pos_y+=Math.ceil(dist_y/10);
62         }
63         else{
64             pos_y+=Math.floor(dist_y/10);
65         }
66     }
67     
68     elem.style.left=pos_x+"px";
69     elem.style.top=pos_y+"px";
70     elem.movement=setTimeout(function(){moveElement(elemId,final_x,final_y,interval)},interval);
71     
72 }

测试代码html部分

用了一个小圆角方块测试移动效果，\(^o^)/~

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <title>moveElement</title>
 6 <style type="text/css">
 7 #test { width:100px; height:100px;background:#FF5400; border-radius:10px; }
 8 </style>
 9 <script type="text/javascript" src="moveElement.js"></script>
10 </head>
11 
12 <body>
13     <div id="test" ></div>
14 </body>
15 </html>

window.onload事件部分

可以把这部分代码加到moveElement函数后面保存文件为moveElement.js 方便测试

 1 window.onload=function(){
 2     var move_elem=document.getElementById("test");
 3     var flag=false;
 4     move_elem.onclick=function(){
 5         if(flag){
 6             moveElement("test",0,0,50);
 7             flag=false;
 8         }
 9         else{
10             moveElement("test",400,300,50);
11             flag=true;
12         }
13     };
14 };