|
知识点梳理：
1.为元素创建属性，elem.movement=setTimeout(repeat,interval);优点：可以测试它是否存在，并在存在的情况下使用clearTimeout, 快速移动鼠标指针动画效果不再混乱
2.Math对象的ceil方法：Math.ceil(number) 例如：Math.ceil(5.2) 返回结果为6
3.函数parseInt(string) 可以把字符串里的数值信息提取出来， 例如：parseInt("39 steps"); 返回结果39
4.函数setTimeout("function",interval) 第一个参数通常是一个字符串，其内容是将要执行的那个函数的名字，第二个参数是一个数值，以ms为单位。
5. var repeat="moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";
elem.movement=setTimeout(repeat,interval);
以下解析为引用：
elementID的值作为一个字符串传给moveElement函数，所以要用引号包裹
假设elementID=1，final_x=2,final_y=3,interval=4,
则repeat的值为：
moveElement('1',2,3,4)
这里1用引号，所以1是字符串类型
因为函数要传参，第一个参数是一个字符串所以elementID外面有单引号包裹着双引号，单引号是负责表达等下setTimeout的字符串标记，而双引号是你repeat的字符串标记，后面用“,”隔开所有参数，依旧使用双引号，因为对repeat而言，这是个字符串而已，“+”连接是因为对于repeat字符串连接就是用“+”才能连接字符串
以下函数可以实现图片越接近目的地速度越慢的动画效果。
function moveElement(elementID,final_x,final_y,interval){
if(!document.getElementById) return false;
if(!document.getElementById(elementID)) return false;
var elem=document.getElementById(elementID);
if(elem.movement){
clearTimeout(elem.movement);
}
if(!elem.style.left){
elem.style.left="0px";
}
if(!elem.style.top){
elem.style.top="0px";
}
var xpos=parseInt(elem.style.left);
var ypos=parseInt(elem.style.top);
var dist=0;
if(xpos==final_x && ypos==final_y){
return true;
}
if(xpos<final_x){
dist=Math.ceil((final_x-xpos)/10);
xpos=xpos+dist;
}
if(xpos>final_x){
dist=Math.ceil((xpos-final_x)/10);
xpos=xpos-dist;
}
if(ypos<final_y){
dist=Math.ceil((final_y-ypos)/10);
ypos=ypos+dist;
}
if(ypos>final_y){
dist=Math.ceil((ypos-final_y)/10);
ypos=ypos-dist;
}
elem.style.left=xpos+"px";
elem.style.top=ypos+"px";
var repeat="moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";
elem.movement=setTimeout(repeat,interval);
} | 
转播
