3原生JS的animate運動(width,height,left,top)

同上一篇添加了

  1. 改變box的width,height,left,top值（遍歷所有需要修改的值）
  2. 需要去判斷fn執(zhí)行的時機(jī)，只有fn的值為函數(shù)時，說明用戶需要執(zhí)行新的功能，進(jìn)行調(diào)用；否則什么也不做
    if (typeof fn == "function") {
    fn();
    }
  3. 每個元素都有一個關(guān)聯(lián)的style對象，可以用來確定和修改行內(nèi)的樣式。
    IE不支持getComputedStyle()方法，但為所有元素都提供了能夠返回相同信息currentStyle屬性。
  4. 使用flag假設(shè)成立法，保證所有的樣式均到達(dá)指定位置，再設(shè)置清除
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<style type="text/css">
* {
    margin: 0;
    padding: 0;
}
#box {
    width: 100px;
    height: 100px;
    background-color: pink;
    position: absolute;
}
</style>
<body>
<button id="btn">按鈕</button>
<div id="box"></div>
<script type="text/javascript">
    var btn = document.getElementById('btn'); 
    var box = document.getElementById('box');
    var timer = null;
    btn.onclick = function () {
        animate(box, {
            width: 500,
            height: 500,
            top: 200,
            left: 300
        }, function() {
            animate(box, {
                width: 100,
                height: 100,
                top: 80,
                left: 120
            });
        });
    } 
    function animate(tag, obj, fn) {
        clearInterval(tag.timer);
        tag.timer = setInterval(function () {
            var flag = true;
            for(var k in obj) {
                var styleName = k;
                var target = obj[k];

                var current = parseInt(getStyle(tag, styleName)) || 0;
                var step = (target - current) / 10;
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                current = current + step;
                tag.style[styleName] = current + 'px';
                if(current != target) {
                    flag = false;
                }
            }
            if(flag) {
                clearInterval(tag.timer);
                fn && fn();
            }
        },30)
    }

    function getStyle(tag, styleName) {
        if(tag.currentStyle) {
            return tag.currentStyle[styleName];
        } else {
            return getComputedStyle(tag, null)[styleName];
        }
    }
</script>
</body>
</html>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容