實例1——控制一個對象的勻速移動和停止

HTML：

復制代碼 代碼如下:

<input type="button" value=" Move It ! "/>
<div>
<img src="1.jpg" alt/>
</div>

復制代碼 代碼如下:

var timer=null;
window.onload=function(){
var odiv=document.getElementById('d1');
var obtn=document.getElementById('btn');
clearInterval(timer); //作用見要點①
obtn.onclick=function(){
timer=setInterval(function(){
var speed=10;
if(odiv.offsetLeft>=300){ //判斷對象邊距 到達指定位移則關閉定時器
clearInterval(timer);
}else{
odiv.style.left=odiv.offsetLeft+speed+'px';
}
},30);
}
}

封裝：

復制代碼 代碼如下:

//object:要移動的對象id itarget:水平位移位置
　 　var timer=null;
function moveto(object,itarget){
var obj=document.getElementById(object);
clearInterval(timer);
timer=setInterval(function(){
var speed=0;
if(obj.offsetLeft<itarget){ //通過對象距離父級的邊距和水平位移量 判斷左右位移方向
speed=10;
}else{
speed=-10;
}
if(obj.offsetLeft==itarget){
clearInterval(timer);
}else{
obj.style.left=obj.offsetLeft+speed+'px';
};
},30);
}

JS：

復制代碼 代碼如下:

var timer=null;
function moveto(object,itarget){
var obj=document.getElementById(object);
clearInterval(timer);
timer=setInterval(function(){
var speed=0;
if(obj.offsetLeft<itarget){//通過位移量除以10，使speed遞減，實現減速停止。 乘以10則為加速。通過乘除的數字，控制快慢
speed=(itarget-obj.offsetLeft)/10;
}else{
speed=-(obj.offsetLeft-itarget)/10;
}
speed=speed>0?Math.ceil(speed):Math.floor(speed);//取整，解決最后不足1px的位移量被忽略的問題
if(obj.offsetLeft==itarget){
clearInterval(timer);
}else{
obj.style.left=obj.offsetLeft+speed+'px';
};
document.title=obj.offsetLeft;
},30);
}

擴展：垂直位移的原理和水平位移的相同。

補充1：
解決speed與itarget不能整除，導致對象不能精確到達itarget位置，而是在其左右抖動問題：

復制代碼 代碼如下:

var timer=null;
function moveto(object,itarget){
var obj=document.getElementById(object);
clearInterval(timer);
timer=setInterval(function(){
var speed=0;
if(obj.offsetLeft<=itarget){
speed=7;
}else{
speed=-7;
}
//設置對象在離目標位置itarget的距離小于speed時，停止運動，同時設置對象的left直接移動到itarget的位置。
if(Math.abs(itarget-obj.offsetLeft<=speed)){
clearInterval(timer);
obj.style.left=itarget+'px';
}else{
obj.style.left=obj.offsetLeft+speed+'px';
};
document.title=obj.offsetLeft;
},30);
}

offset的Bug：例如offsetWidth，它包含的不只是width，還包含padding和border。當給對象設置了填充或邊框時，再將offsetWidth賦值給對象時，就會運動就會有差異。
解決：不用offset，而是通過創建一個兼容IE和FF的函數，獲取元素的width屬性值，來代替offsetWidth。該函數如下：getAttr()

復制代碼 代碼如下:

function getAttr(obj,attrName){
var obj=document.getElementById(obj);
if(obj.currentStyle){
return obj.currentStyle[attrName]; //兼容IE
}else{
return getComputedStyle(obj,false)[attrName]; //兼容FF
}
}