實例1－控制一個物件的勻速移動和停止
HTML：
複製程式碼
程式碼如下:
null;
window.onload=function(){
var odiv=document.getElementById('d1'); clearInterval(timer) ; //功能見點① obtn.onclick=function(){
eed=10; if(odiv.offsetLeft>=300){ //判斷物件邊距到達指定位移則關閉定時器
clearInterval(timer); > },30);封裝：複製程式碼 程式碼如下:
//object:要移動的物件id itarget:水平位移位置
var timer=null;
function moveto(object,itarget){🎜> function moveto(object,itarget){
頟);
clearInterval(timer);
=0;
if(obj.offsetLeft speed=10;
speed=-10;
} }else{
};
},30);
},30);
>
實例2——修改上述封裝的函數moveto()，使該物件變速停止
JS：
複製程式碼
複製程式碼
複製程式碼
複製碼🎜>
var timer=null;
function moveto(object,itarget){
timer);
timer=setInterval(function (){
var speed=0;
乘以10則為加速。數字，控制快慢
speed=(itarget-obj.offsetLeft)/10; speed= speed>0?Math.ceil(speed):Math.floor(speed);//取整，解決最後不足1px的位移量被忽略的問題
clearInterval(timer);
}else{
};
, );
}
キーポイント:
①速度値を減少させることで速度変更を実現します。
②最後に移動します。ピクセルが1px未満の場合、1px未満のいくつかの値は左のオブジェクトに加算（または減算）されず、無視されるため、最終的な変位は元の位置よりも大きくなります。水平方向の変位位置を設定します。ターゲットは数ピクセル小さくなります。解決策は切り上げです。正の数値は ceil() によって切り上げられ、負の数値は Floor() によって切り捨てられます。
拡張: 垂直方向の変位の原理は水平方向の変位の原理と同じです。
補足 1:
速度と itarget が割り切れず、オブジェクトが itarget の位置に正確に到達せず、その周囲で揺れるという問題を解決します。
var timer=null;
function moveto( object,itarget){
var obj=document.getElementById(object);
var Speed=0;
If(obj.offsetLeft<=itarget) {
Speed=7;
} else{
Speed=-7;
}
// itarget の距離が Speed 未満の場合、移動を停止し、同時にオブジェクトを設定します。左は itarget の位置に直接移動します。 itarget 'px' ;
}else{
. ft;
},30);
}
補足 2:
オフセットのバグ: たとえば、offsetWidth には幅だけでなくパディングとボーダーも含まれます。オブジェクトにパディングやボーダーを設定し、offsetWidthを設定した場合、動きに違いが生じます。
解決策: offset を使用する代わりに、offsetWidth の代わりに要素の width 属性値を取得する IE および FF と互換性のある関数を作成します。関数は次のとおりです: getAttr()
コードをコピー
コードは次のとおりです:
return getComputedStyle(obj,false)[attrName] //FF
}
}
;
