JavaScriptを利用してオブジェクトの等速・可変速動作を実現する方法_基礎知識

例 1 - オブジェクトの均一な移動と停止の制御

HTML:

コードをコピーします コードは次のとおりです:

JS: 右の動きを実装します

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

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){ //オブジェクトのマージンが指定されたディスプレイスメントに達したらタイマーを終了します }
},
}
}


ポイント: "上記のコードのような演算子、speed の値が 7 などの基数の場合、増加する左マージンの値は 300px にはなりません。 、ただし、294 に到達すると 301 に直接ジャンプし、条件が失敗して停止できなくなります。
②else文を使用して、divの移動を停止した後、ボタンをクリックするたびに一定の速度で移動しないようにします。
③ ボタンをクリックし続けたときに複数のタイマーが同時にオンになるのを防ぐため、タイマーの前にまずタイマーをオフにし、移動速度が重なり合うようにします。

パッケージ:

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

//object: 移動するオブジェクトの ID itarget: 水平移動位置
var timer=null;
function moveto(object,itarget){
var obj=document.getElementById (object ); 親からのエッジ 距離と水平変位に基づいて左右の変位方向を決定します
speed=10;
}else{
speed=-10;
}
If( obj.offsetLeft==itarget){
clearInterval(timer);
30);
}



例 2 - 上記のカプセル化された関数 moveto() を次のように変更します。オブジェクトを可変速度で停止させます

JS:

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

var timer=null; function moveto(object,itarget){ var obj=document.getElementById(object); clearInterval(timer); timer= setInterval(function (){

varspeed=0;

if(obj.offsetLeft 速度=(itarget-obj.offsetLeft)/10;
}else{
速度=-(obj.offsetLeft-itarget)/10;
speed>0?Math.ceil (speed):Math.floor(speed);//1px 未満の最終ディスプレイスメントが無視される問題を解決するための丸め処理
if(obj.offsetLeft==itarget){
clearInterval(timer);
ment.title=obj.offsetLeft;
},30 );
}


Key points:
①Achieve speed change by decreasing the speed value.
② Move to the end, when the pixel is less than 1px, several values ​​less than 1px will not be added (or subtracted) to the object left, but will be ignored, so the final displacement is larger than the set horizontal displacement position itarget is a few pixels less. The solution is to round up: positive numbers are rounded up by ceil(), and negative numbers are rounded down by floor().

Extension: The principle of vertical displacement is the same as that of horizontal displacement.

Supplement 1:
Solve the problem that speed and itarget are not divisible, resulting in the object not accurately reaching the itarget position, but shaking around it:

Copy code The code is as follows:

var timer=null;
function moveto(object,itarget){
var obj=document.getElementById(object);
var speed=0;
If(obj.offsetLeft<=itarget) {
speed=7;
}else{
speed=-7;
}
// When the distance of itarget is less than speed, stop moving and set the object at the same time The left is moved directly to the position of itarget. itarget 'px' ;
             }else{
                                                                                                                                                                                                            .offsetLeft;
},30);
}




Supplement 2:

Bug in offset: For example, offsetWidth, which includes not only width, but also padding and border. When a padding or border is set for an object, and offsetWidth is assigned to the object, there will be a difference in movement.
Solution: Instead of using offset, create a function compatible with IE and FF to obtain the width attribute value of the element instead of offsetWidth. The function is as follows: getAttr()Copy code

The code is as follows:

function getAttr(obj, attrName){ var obj=document.getElementById(obj); if(obj.currentStyle){ return obj.currentStyle[attrName]; //Compatible with IE }else{

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

}
}