JS 抖動函數封裝

原生JS實現封裝的抖動函數框架

<style>
    ul{ margin-top: 100px; }
    li {
        float: left;
        margin-left: 20px;
        position: absolute;
        top: 0;
        margin-top: 100px;
    }
</style>

<ul>
    <li>1111</li>
    <li>2222</li>
    <li>3333</li>
    <li>4444</li>
</ul>

<script>
    var oLi = document.getElementsByTagName('li');
    for (var i = 0; i < oLi.length; i++) {
        oLi[i].style.left = i + '10px';
        oLi[i].onmouseover = function () {
            var _this = this;
            shake(_this, 'top', 20, function () {
                alert('回調已完成')
            })
        }
    }

    //抖動運動框架
    function shake(obj, attr, speed, endFn) {
        if (obj.onoff) return;  //當前的onoff=false
        obj.onoff = true;
        var pos = parseInt(getStyle(obj, attr));
        var arr = []; //10,-10,8,-8,6,-6......
        var timer = null;
        var num = 0;

        for (var i = speed; i > 0; i -= 2) {
            arr.push(i, -i);
        }
        arr.push(0); //最後加上0

        obj.timer = setInterval(function () {
            obj.style[attr] = pos + arr[num] + 'px';
            num++;
            if (num === arr.length) {
                clearInterval(obj.timer);
                endFn && endFn();//判斷回調函數
                obj.onoff = false;
            }
        }, 50)
    }
    //獲取css樣式
    function getStyle(obj, attr) {
        if (obj.currentStyle) {
            return obj.currentStyle[attr];
        } else {
            return getComputedStyle(obj)[attr];
        }
    }
</script>

這邊穿梭進入演示空間