JavaScript——対象の均等速度/変速運動を実現します.

例1——オブジェクトの均等移動と停止を制御する
HTML:

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

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){ //                   
                    clearInterval(timer);
                }else{
                    odiv.style.left=odiv.offsetLeft+speed+'px';
                }
            },30);
        }
    }

要点:①if文の条件は「=」演算子ではなく、上記のコードのようにspeedの値が基数7の場合、増え続けている左の間隔は300 pxの値ではなく、294に達したら直接301にジャンプし、条件が無効になり、停止できなくなります.②else文を使うと移動停止を防止した後、ボタンを押すたびに、divはspeedを移動します.③タイマーの前にタイマーをオフにして、ボタンを連続的にクリックしないようにすると同時に複数のタイマーをオンにして、移動速度を重ねてから速くします.
パッケージ:

//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);
    }

 
実例2——上記パッケージの関数moveto()を修正し、当該オブジェクトの変速を停止させる.
 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);
    }

ポイント:①speed値を逓減することで、変速を実現します.②最後に移動すると、画素が1 px以下の場合、1 px以下のいくつかの値はオブジェクトleftに追加(または減算)されず、無視されるので、最終シフト量は設定された水平シフト位置itargetよりも数画素少ない.解決の方法は整理を行うことです.正の数値は上に向けてceil()を整え、負の数は下に向かってflor()を整理します.
 
 拡張:垂直変位の原理は水平変位と同じです.
 
 補足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);
    }

 補足2:
offsetのBug:例えば、offset Widthは、widthだけでなく、paddingとborderも含む.オブジェクトに塗りつぶしや枠を設定すると、offset Widthの値をオブジェクトに割り当てると動きが違ってきます.解决:offsetではなく、対応するIEとFFの関数を作成することにより、offset Widthの代わりに要素のwidth属性値を取得する.この関数は以下の通りです.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
        }
    }

 
 
転載先:https://www.cnblogs.com/slowsoul/archive/2013/02/20/2918226.html