元素抖动函数封装

1.抖动封装

/*

    op: {

        el,

        attr,

        shakeLength

    }

*/    

function shake(op){

    var el = op.el,

    attr = op.attr,

    shakeLength = op.shakeLength||15,

    start = css(box,attr),

    shakeArr = [];

    for(var i = shakeLength; i >= 0; i--){

        shakeArr.push(i%2?i:-i);

    }

    move();

    function move(){

        requestAnimationFrame(function(){

            if(shakeArr.length <= 0){

                console.log("抖动完成");

            } else {

                css(el,attr,start + shakeArr.shift());

                console.log(1);

                move();

            }

        });

    }

}    

(function(){

    var box = document.querySelector("#box");

    shake({

        el: box,

        attr: "width",

        shakeLength: 20

    });

})();


2.多值同时抖动


3.抖动函数完整封装


你可能感兴趣的:(元素抖动函数封装)