JavaScriptスポーツフレームの詳細解

17626 ワード
フレームの原理は、基本的なステップです.
  • タイマー
    • をクリアします.
  • タイマーをオンにして、速度を計算します.
  • 停止条件を判断し、運動を実行する
    • .
    var timer = null;  
function startMove(){  
    var oDiv = document.getElementById('div1');  
      //     
    clearInterval(timer);  
        //      
    var iSpeed = 10;  
    //       
    timer = setInterval(function(){  
        //        
        if(oDiv.offsetLeft > 300){  
            clearInterval(timer);  
        }else{  
            //        
            oDiv.style.left = oDiv.offsetLeft + iSpeed + 'px';  
        }  
    },30);  
}
    停止条件については、書き込み中ですので、パラメータを分離する必要があります.以下は共有した例です.主に目標によって速度の正負を判断します.マウスをスライドさせながら動かす/回復する効果があります.
    window.onload = function(){  
    var oDiv = document.getElementById('div1');  
    oDiv.onmouseover = function(){  
        startMove(0);  
    }  
    oDiv.onmouseout = function(){  
        startMove(-100);  
    }  
}  
var timer = null;  
var iSpeed;  
function startMove(iTatget){  
    var oDiv = document.getElementById('div1');  
    clearInterval(timer);  
    timer = setInterval(function(){  
        //      
        if(iTatget - oDiv.offsetLeft > 0){  
            iSpeed = 10;  
        }else{  
            iSpeed = -10;  
        }  
        //                                                                                                                                                                                                                            
        if(oDiv.offsetLeft == iTatget){  
            clearInterval(timer);  
        }else{  
            oDiv.style.left = oDiv.offsetLeft + iSpeed + 'px';  
        }  
        document.title = oDiv.offsetLeft;  
    },30)  
}
    もう一つの例では、フェードアウト、すなわちオブジェクトの透明度を変更します.元の位置属性のようなoffset Lsetがないので、透明度の値を保存する変数が必要です.速度を加減して、元素の透明度パターンを最後に支払います.フェードアウト効果を実現します.
    window.onload = function(){  
    var oImg = document.getElementById('img1');  
    oImg.onmouseover = function(){  
        startMove(100);  
    }  
    oImg.onmouseout = function(){  
        startMove(30);  
    }  
}  
var timer = null;  
//           
var alpha = 30;  
function startMove(iTarget){  
    var oDiv = document.getElementById('img1');  
    clearInterval(timer);  
    timer = setInterval(function(){  
        var iSpeed = 0;  
        if(alpha > iTarget){  
            iSpeed = -1;  
        }else{  
            iSpeed = 1;  
        }  
        if(alpha == iTarget){  
            clearInterval(timer);  
        }else{  
                        //          
            alpha += iSpeed;  
            oDiv.style.filter = 'alpha(opacity:'+ alpha+')';  //ie
            oDiv.style.opacity = alpha/100;  //ff
            document.title = alpha;  
        }  
                                                                                                                                                                                                         
    },30)  
}
    緩衝運動の原理は速度の値を変えることです.毎回の積算の速度値が小さくなると、物体全体がだんだん遅く見えるので、最後に止まってしまいます.変化に相当して物体に加速度を持たせる.この加速度は、物体の現在位置と目標位置の間の距離から得られます.両者の距離はずっと小さくなっていますので、速度もずっと小さくなっています.以下のとおりです
    function startMove(iTarget){  
    var oDiv = document.getElementById('div1');  
    clearInterval(timer);  
    timer = setInterval(function(){  
        var iSpeed = (iTarget - oDiv.offsetLeft) / 8;  
        //         ，          
        iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);  
        if(oDiv.offsetLeft == iTarget){  
            clearInterval(timer);  
        }else{  
            oDiv.style.left = oDiv.offsetLeft + iSpeed + 'px';  
        }  
        document.title = oDiv.offsetLeft + '...' + iSpeed;  
    },30);  
}
    多物体運動
    次のステップは、多物体運動を処理し、運動関数の中から毎回1つの要素を選択してイベントをプラスします.複数の物体に対して同じ動きが必要な場合は、動きの対象をパラメータとして送る必要があります.
    window.onload = function(){  
    var aDiv = document.getElementsByTagName('div');  
    for(var i=0;i<aDiv.length;i++){  
        aDiv[i].onmouseover = function(){  
            startMove(this,300);  
        }  
        aDiv[i].onmouseout = function(){  
            startMove(this,100);  
        }  
    }  
}  
function startMove(obj,iTarget){  
    //    ，       ，           
    clearInterval(obj.timer);  
    obj.timer = setInterval(function(){  
        var iSpeed = (iTarget - obj.offsetWidth) / 8;  
        iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);  
        if(obj.offsetWidth == iTarget){  
            clearInterval(obj.timer);  
        }else{  
            obj.style.width = obj.offsetWidth + iSpeed + 'px';  
        }  
                                                                                                                                             
    },30)  
}
    多物体のフェードアウト時にも似たような問題があります.透明度を変更する場合は、まず一つの変数で透明度を保存するので、各物体に対して透明度値の属性を設定しなければなりません.
    window.onload = function(){  
    var aDiv = document.getElementsByTagName('div');  
    for(var i=0;i<aDiv.length;i++){  
        //           
        aDiv[i].alpha = 30;  
        aDiv[i].onmouseover = function(){  
            startMove(this,100);  
        }  
        aDiv[i].onmouseout = function(){  
            startMove(this,30);  
        }  
    }  
}  
function startMove(obj,iTarget){      
    clearInterval(obj.timer);  
    obj.timer = setInterval(function(){  
        var iSpeed = (iTarget - obj.alpha) / 8;  
        iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);  
        if(obj.alpha == iTarget){  
            clearInterval(obj.timer);  
        }else{  
            obj.alpha += iSpeed;  
            obj.style.filter = 'alpha(opacity:'+obj.alpha+')';  
            obj.style.opacity = obj.alpha / 100;  
        }  
        document.title = obj.alpha;  
    },30);  
}
    位置属性のバグを解決します.
    window.onload = function(){  
        var oDiv = document.getElementById('div1');  
        setInterval(function(){  
    // getStyle  ，        ，   css   ，         ，  witdh 100px；
    //    parseInt                                                                                                          
            oDiv.style.width = parseInt(getStyle(oDiv,'width')) - 1 + 'px';  
                                                                                                        
        },30)  
    }  
    function getStyle(obj,attr){  
        if(obj.currentStyle){  
            return obj.currentStyle[attr];  
        }else{  
            return getComputedStyle(obj,false)[attr];  
        }  
    }
    任意値運動
    get Style関数によって、要素のスタイルを取得することができます.また、atrによって修正が必要なcss属性を作成することもできます.これは物体によって異なる運動形態があるということです.
    window.onload = function(){  
    var aDiv = document.getElementsByTagName('div');  
    aDiv[0].onmouseover = function(){  
        startMove(this,'width',300);  
    }  
    aDiv[0].onmouseout = function(){  
        startMove(this,'width',100);  
    }  
    aDiv[1].onmouseover = function(){  
        startMove(this,'height',100);  
    }  
    aDiv[1].onmouseout = function(){  
        startMove(this,'height',50);  
    }  
}  
function getStyle(obj,attr){  
    if(obj.currentStyle){  
        return obj.currentStyle(attr);  
    }else{  
        return getComputedStyle(obj,false)[attr];  
    }  
}  
function startMove(obj,attr,iTarget){  
    clearInterval(obj.timer);  
    obj.timer = setInterval(function(){  
        var iCur = parseInt(getStyle(obj,attr));  
        var iSpeed = (iTarget - iCur) / 8;  
        iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);  
        if(iCur == iTarget){  
            clearInterval(obj.timer);  
        }else{  
            obj.style[attr] = iCur + iSpeed + 'px';  
        }  
                                                                                                    
    },30)  
}
    パーフェクト版
    上記バージョンは透明度の任意の値を扱うことができませんので、追加の互換性hackを追加する必要があります.
    window.onload = function(){  
        var aDiv = document.getElementsByTagName('div');  
        aDiv[0].onmouseover = function(){  
            startMove(this,'opacity',100);  
        }  
        aDiv[0].onmouseout = function(){  
            startMove(this,'opacity',30);  
        }  
    }  
    
    function getStyle(obj, attr){  
        if(obj.currentStyle)    {  
            return obj.currentStyle[attr];  
        }else{  
            return getComputedStyle(obj, false)[attr];  
        }  
    }  
    
    function startMove(obj,attr,iTarget){  
        clearInterval(obj.timer);  
        obj.timer = setInterval(function(){  
            var iCur = 0;  
            if(attr == 'opacity'){  
                iCur = parseInt(parseFloat(getStyle(obj, attr))*100);  
            }else{  
                iCur = parseInt(getStyle(obj,attr));  
            }  
            var iSpeed = (iTarget - iCur) / 8;  
            iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);  
            if(iCur == iTarget){  
                clearInterval(obj.timer);  
            }else{  
                if(attr=='opacity'){  
                    iCur += iSpeed  
                    obj.style.filter='alpha(opacity:' + iCur + ')';  
                    obj.style.opacity=iCur / 100;  
                }  
                else{  
                    obj.style[attr]=iCur+iSpeed+'px';  
                }  
                document.title = obj.style[attr];  
            }  
                                                                                      
        },30)  
    }
    チェーン運動
    私たちの動きの枠組みはこれまでに、基本的な機能が実現されました.今は広がります.チェーン運動とは、運動を続けて運動することです.動きが止まったら、関数をリセットします.運動関数をリセットすると、このような効果が現れます.したがって、コールバック関数として関数が導入されました.
    window.onload = function(){  
    var oDiv = document.getElementById('div1');  
    oDiv.onclick = function(){  
        startMove(this,'width',300,function(){  
            startMove(oDiv,'height',300,function(){  
                startMove(oDiv,'opacity',100)  
            })  
        })  
    }  
}  

function getStyle(obj,attr){  
    if(obj.currentStyle){  
        return obj.currentStyleattr[attr];  
    }else{  
        return getComputedStyle(obj, false)[attr];  
    }  
}  
                                                                      
function startMove(obj,attr,iTarget,fn){  
    clearInterval(obj.timer);  
    obj.timer = setInterval(function(){  
        var iCur = 0;  
        if(attr == 'opacity'){  
            iCur = parseInt(parseFloat(getStyle(obj, attr))*100);  
        }else{  
            iCur = parseInt(getStyle(obj,attr));  
        }  
        var iSpeed = (iTarget - iCur) / 8;  
        iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);  
        if(iCur == iTarget){  
            clearInterval(obj.timer);  
            //      
            if(fn) fn();  
        }else{  
            if(attr=='opacity'){  
                iCur += iSpeed  
                obj.style.filter='alpha(opacity:' + iCur + ')';  
                obj.style.opacity=iCur / 100;  
            }  
            else{  
                obj.style[attr]=iCur+iSpeed+'px';  
            }  
            document.title = obj.style[attr];  
        }  
                                                                        
    },30)  
}
    いっせいに運動する
    今までの私たちの運動の枠組みには、幅と高さを同時に変えるなど、二つの属性を同時に動かすことができない小さな欠点があります.この要求の着信属性はいくつかの値が異なる.変更する属性を保存するためにjsonが導入されたことを考慮します.
    window.onload = function(){  
    var oDiv = document.getElementById('div1');  
    oDiv.onclick = function(){  
        startMove(this,{'width':300,'height':400});  
    }  
}  

function getStyle(obj, attr){  
    if(obj.currentStyle)    {  
        return obj.currentStyle[attr];  
    }else{  
        return getComputedStyle(obj, false)[attr];  
    }  
}  

function startMove(obj,json,fn){  
    clearInterval(obj.timer);  
    obj.timer = setInterval(function(){  
     //   json   
     for(var attr in json){     //  json     
            var iCur = 0;  
            if(attr == 'opacity'){  
                iCur = parseInt(parseFloat(getStyle(obj, attr))*100);  
            }else{  
                iCur = parseInt(getStyle(obj,attr));  
            }  
            var iSpeed = (json[attr] - iCur) / 8;  //json[attr]   json  
            iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);  
            if(iCur == json[attr]){  
                clearInterval(obj.timer);  
                if(fn) fn();  
            }else{  
                if(attr=='opacity'){  
                    iCur += iSpeed  
                    obj.style.filter='alpha(opacity:' + iCur + ')';  
                    obj.style.opacity=iCur / 100;  
                }  
                else{  
                    obj.style[attr]=iCur+iSpeed+'px';  
                }  
                document.title = obj.style[attr];  
            }  
        }  
    },30)
    上記のコードは、同時に運動する問題を解決することができます.しかし、一つのバグがあります.例えば、同時運動のある属性は、変化が小さいとすぐに停止し、タイマーを停止します.他の属性の変化も停止します.これらの属性はタイマーを共有しているからです.ですから、3人が来たら一緒に山登りに行くという判断が必要です.三人は先に来たり、後から来たりして、三人とも集まってから出発します.つまり、三つの属性だけが目標値に達して、タイマーをオフにします.最初に検査量を設定してください.すべての人が来たら、循環します.一人だけ来ていないので、検査は嘘です.全部到着しました.本当に検出されました.タイマーを停止します.
    window.onload = function(){  
    var oDiv = document.getElementById('div1');  
    oDiv.onclick = function(){  
        startMove(this,{'width':102,'height':400,'opacity':100});  
    }  
}  
function getStyle(obj, attr){  
    if(obj.currentStyle)    {  
        return obj.currentStyle[attr];  
    }else{  
        return getComputedStyle(obj, false)[attr];  
    }  
}  
function startMove(obj,json,fn){  
    clearInterval(obj.timer);  
    obj.timer = setInterval(function(){  
  
    //    ，           
        var flag = true;  
        
        for(var attr in json){    
            //        
            var iCur = 0;  
            if(attr == 'opacity'){  
                iCur = parseInt(parseFloat(getStyle(obj, attr))*100);  
            }else{  
                iCur = parseInt(getStyle(obj,attr));  
            }  
            //      
            var iSpeed = (json[attr] - iCur) / 8;  
            iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);  
            //      
            //             
            if(iCur != json[attr]){  
                flag = false;  
            }     
            if(attr=='opacity'){  
                iCur += iSpeed  
                obj.style.filter='alpha(opacity:' + iCur + ')';  
                obj.style.opacity=iCur / 100;  
            }  
            else{  
                obj.style[attr]=iCur+iSpeed+'px';  
            }  
        }  
        if(flag){  
            clearInterval(obj.timer);  
            if(fn) fn();  
        }  
    },30)  
}
    再循環外にフラグ変数flags=trueを定義します.を使用します.サイクルが終わったら、この値が本当ならタイマーを停止します.この値は、タイマーを実行するたびに初期化されます.サイクルの過程で、来ないものが一つあれば、flagsはfalseに設定されます.もしある人が来たら、この時 iCur!=json[atr]は、速度が0で、後に実行される結果を表しています.すべてが目標値に達します.サイクルはフラグの値を変えません.この場合、次の運転タイマだけが必要です.フラッグを初期化して本物にするということです.サイクルは全部来ましたから、速度は0でもう変わりません.サイクルが終わります.flagsは本当です.全部来たという意味です.したがって、タイマーを終了します.
    最後に完璧な動きのフレームを添付して、move.jsにパッケージして呼び出すことができます.
    /** 
 * @author rsj217 
 * getStyle      
 * startMove       
 */  
                 
function getStyle(obj, attr){  
    if(obj.currentStyle)    {  
        return obj.currentStyle[attr];  
    }else{  
        return getComputedStyle(obj, false)[attr];  
    }  
}  
function Move(obj,json,fn){  
    //          
    clearInterval(obj.timer);  
    //               
    obj.timer = setInterval(function(){  
        //          
        var flag = true;  
        for(var attr in json){    
            //        
            var iCur = 0;  
            if(attr == 'opacity'){  
                iCur = parseInt(parseFloat(getStyle(obj, attr))*100);  
            }else{  
                iCur = parseInt(getStyle(obj,attr));  
            }  
            //      
            var iSpeed = (json[attr] - iCur) / 8;  
            iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);  
            //          
            if(iCur != json[attr]){  
                flag = false;  
            }     
            //    ，        
            if(attr=='opacity'){  
                iCur += iSpeed  
                obj.style.filter='alpha(opacity:' + iCur + ')';  
                obj.style.opacity=iCur / 100;  
            }  
            else{  
                obj.style[attr]=iCur+iSpeed+'px';  
            }  
        }  
        //      
        if(flag){  
            clearInterval(obj.timer);  
            if(fn) fn();  
        }  
    },30)  
}
      window.onload=function(){
              var oDiv=document.getElementsByTagName('div');
              for (var i = 0; i < oDiv.length; i++) {
                 oDiv[i].onmouseenter=function(){
                  var _this=this.getElementsByTagName("span")[0];
                  startMove(_this,{width:400,opacity:0},function(){
                    startMove(_this,{width:200,opacity:80})
                  });
                 }
              }
            }
    requestsモジュール03——シミュレーションはmultiiprt/form-dataフォーマットを通してpost要求を送ります.