JavaScript DOM编程艺术——moveElement函数



知识点梳理：

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);
}