本文主要是介绍【菜瓜乱学，JavaScript DOM篇，0002期】 —— 自己编写一个网页元素移动的动画函数 moveElement ...，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
学习自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.οnlοad=function(){ 2 var move_elem=document.getElementById("test"); 3 var flag=false; 4 move_elem.οnclick=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 };
测试效果为第一次点击小方向右下移动,第二次左上返回移动,两者交替显示,快试试吧.
这篇关于【菜瓜乱学，JavaScript DOM篇，0002期】 —— 自己编写一个网页元素移动的动画函数 moveElement ...的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
