总结一下这几天学的《JavaScript DOM编程艺术 第2版》（2）

这里介绍第十章的JS　DOM内容

重点介绍moveElement.js，以下是moveElement.js的源码；

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);
if (xpos == final_x && ypos == final_y) {
return true;
}
if (xpos < final_x) {
var dist = Math.ceil((final_x - xpos)/10);
xpos = xpos + dist;
}
if (xpos > final_x) {
var dist = Math.ceil((xpos - final_x)/10);
xpos = xpos - dist;
}
if (ypos < final_y) {
var dist = Math.ceil((final_y - ypos)/10);
ypos = ypos + dist;
}
if (ypos > final_y) {
var 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);
}

这里的动画效果完全是用像素一个一个移动过来的，以前还以为那些图片滑动的代码是有多难写，我现在释然了，重要的是如何让他自行滑动（看看在JS里加个时间函数能不能实现）及两边加上滑动控制的箭头。好了不瞎扯了，讲重点

函数一开始判断浏览器能否使用jsDOM,不能则不运行该JS文件，然后初始化要滑动图片的初始位置

var xpos = parseInt(elem.style.left);是将该图片的位置换算成整数，还要parsefloat换算成浮点类型等等，

接下来则是滑动的具体函数了，通过dist = Math.ceil((final_x - xpos)/10);来得到图片距离要滑动的目的位置的长度的1/10，即一次移动的长度，这样设置的好处是随着图像到目的的，然后dist（即一次性滑动的距离）的数据也越来越来越小，即往目的位置越近，移动的速度越慢。

setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式

setTimeout(code,millisec)，code是调用的函数，millsec是等待的毫秒数，

function moveElement(elementID,final_x,final_y,interval)再调用该函数时需要注意格式elementID是获取的id，interval是滑动该距离所需的时间。