使用JavaScript 實現物件 勻速/變速運動的方法_基礎知識

實例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);

        }    }②使用else語句是防止停止移動後，每點擊一次按鈕，div任會移動一個speed。 ③在定時器之前，先關閉一下定時器，防止連續點擊按鈕時，同時開啟多個定時器，使移動速度疊加後更快。

封裝：複製程式碼 程式碼如下:

//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()コードをコピー

コードは次のとおりです:

function getAttr(obj, attrName){ var obj=document.getElementById(obj); if(obj.currentStyle){ return obj.currentStyle[attrName] //IE と互換性があります; }else{

return getComputedStyle(obj,false)[attrName] //FF

}
}


;