原生js仿jquery--animate效果

時間 2019-11-12

原文原文鏈接

效果

代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>動畫</title>
    <style>
        *{margin:0;padding:0;}
        .box{width: 400px;height: 300px;background: #000;margin:40px auto;color: #fff;font-size: 18px;text-align: center;}
    </style>
    <script>
    //獲取對象樣式規則信息，IE下使用currentStyle
    function getStyle(obj,style){
        return obj.currentStyle?obj.currentStyle[style]:getComputedStyle(obj,false)[style];
    }
    //原生js動畫相似jquery--animate
    function animate(obj,styleJson,callback){
        clearInterval(obj.timer);
        // 開啓定時器
        obj.timer=setInterval(function(){
            var flag=true;//假設全部動做都已完成成立。
            for(var styleName in styleJson){
                //1.取當前屬性值
                var iMov=0;
                // 透明度是小數，因此得單獨處理
                iMov=styleName=='opacity'?Math.round(parseFloat(getStyle(obj,styleName))*100):parseInt(getStyle(obj,styleName));

                //2.計算速度
                var speed=0;
                speed=(styleJson[styleName]-iMov)/8;//緩衝處理，這邊也能夠是固定值
                speed=speed>0?Math.ceil(speed):Math.floor(speed);//區分透明度及小數點，向上取整，向下取整
                
                //3.判斷是否到達預約值
                if(styleJson[styleName]!=iMov){
                    flag=false;
                    if(styleName=='opacity'){//判斷結果是否爲透明度
                        obj.style[styleName]=(iMov+speed)/100;
                        obj.style.filter='alpha(opacity:'+(iMov+speed)+')';
                    }else{
                      obj.style[styleName]=iMov+speed+'px';
                    }
                }
            }
            if(flag){//到達設定值，中止定時器，執行回調
                clearInterval(obj.timer);
                if(callback){callback();}
            }
        },30)
    }
    window.onload=function(){
        document.getElementById('box').onclick=function(){
            var oThis=this;
            animate(oThis,{'width':'500'},function(){
                animate(oThis,{'height':'400'},function(){alert('寬度高度都增長了')});
            });
        }
        
    }
    
    </script>
</head>
<body>
    <div class="box" id="box">點擊效果：寬度增長->高度增長->彈出框</div>
</body>
</html>

注意點

1.動畫前要先中止原來的定時器，否則綁定多個對象的話會衝突javascript

2.定時器的id要區分開，不能重疊，這裏我直接那綁定對象的對象來賦值 obj.timercss

3.要判斷所要執行的動畫，是否所有到了設定值=> flag，所有執行完再中止定時器再執行回調函數html

4.javascript的數據類型轉換問題java

alert(0.07*100);
//彈出7.000000000000001

注意：Javascript在存儲時並不區分number和float類型，而是統一按float存儲。而javascript使用IEEE 754-2008 標準定義的64bit浮點格式存儲number，按照IEEE 754的定義：jquery

decimal64對應的整形部分長度爲 10,小數部分長度爲16，因此默認的計算結果爲「7.0000000000000001」，如最後一個小數爲0，則取1做爲有效數字標誌。css3

5.傳入的json數據不能帶px，例如｛'width':'300px'｝，爲了兼容透明度的數值，沒想到好的處理方式，有沒有大神指導下...json

6.該定時器作了緩衝處理，變化愈來愈慢，想要快速的效果或者勻速的效果，只須要在2.計算速度那塊作下處理就能夠瀏覽器

7.不兼容css3的屬性,只兼容了（width,height,top,left,right,bottom,opacity）函數

8.獲取對象樣式的信息，要判斷IE或者火狐瀏覽器，區別對待動畫

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。