《javascript dom编程艺术》：实现动画效果

看到第十章，依照书上的规范成功写出了一个动态的位置转换。

本书的例子虽然简单，但是重要的是其中所含的思想。

 1 function moveElement(elementID,finaX,finaY,interval)
 2 {
 3     if(!document.getElementById)return false;
 4     if(!document.getElementById(elementID))return false;
 5     var elem=document.getElementById(elementID);
 6     var xpos=parseInt(elem.style.left);
 7     var ypos=parseInt(elem.style.top);
 8     if(xpos==finaX&&ypos==finaY)
 9     {
10         return ture;
11     }
12     if(xpos<finaX)xpos++;
13     if(xpos>finaX)xpos--;
14     if(ypos<finaY)ypos++;
15     if(ypos>finaY)ypos--;
16     elem.style.left=xpos+"px";
17     elem.style.top=ypos+"px";
18     var repeat = "moveElement(‘"+elementID+"‘,"+finalX+","+finalY+","+interval+")";
19     movement=setTimeout(repeat,interval);
20 }
21 addLoadEvent(moveElement);

上面的一段代码是一个javascript的函数段。这个函数的作用是元素的移动。

函数参数分别是：元素的ID，移动之后的最终坐标和移动的持续时间。

先对行为作出判断，如果无法读取元素ID 那么返回false。否则读取 元素的初始位置。判断和最终位置的差别。

然后使用setTimeout函数，这是一个让某个函数经过一段时间之后才开始执行的函数。

最后使用addLoadEvent保证在整个html加载之后再执行此函数段。

可以运用在图片，文本和其他元素中，思想都是一样的。只是不同的时候的细节需要考虑。