元素抖動函數(shù)封裝

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.多值同時抖動

<script>

/*

????op:?{

????????el,

????????attr,

????????shakeLength

????}

*/????

function?shake(op){

????var?el?=?op.el,

????attr?=?op.attr,

????shakeLength?=?op.shakeLength||15,

????start?=?{},

????shakeArr?=?[];

????if(typeof?attr?===?"object"?){

????????for(var?i?=?0;?i?<?attr.length;?i++){

????????????start[attr[i]]?=?css(el,attr[i]);

????????}

????}?else?{

????????start[attr]?=?css(el,attr);

????}

????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?{

????????????????var?nub?=?shakeArr.shift();

????????????????for(var?s?in?start){

????????????????????css(el,s,start[s]?+?nub);

????????????????}

????????????????move();

????????????}

????????});

????}

}????

(function(){

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

????shake({

????????el:?box,

????????attr:?["width","height","opacity"],

????????shakeLength:?20

????});

})();

</script>


3.抖動函數(shù)完整封裝

<script>

/*

????op:?{

????????el,

????????attr,

????????shakeLength

????}

*/????

function?shake(op){

????var?el?=?op.el,

????attr?=?op.attr,

????shakeLength?=?op.shakeLength||15,

????shakeArr?=?[];

????el.shakeStart?=?{};

????if(el.shake)?{

????????return?;

????}?

????if(typeof?attr?===?"object"?){

????????for(var?i?=?0;?i?<?attr.length;?i++){

????????????el.shakeStart[attr[i]]?=?css(el,attr[i]);

????????}

????}?else?{

????????el.shakeStart[attr]?=?css(el,attr);

????}

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

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

????}

????move();

????function?move(){

????????el.shake?=?requestAnimationFrame(function(){

????????????if(shakeArr.length?<=?0){

????????????????el.shake?=?false;

????????????????op.cb&&op.cb();

????????????}?else?{

????????????????var?nub?=?shakeArr.shift();

????????????????for(var?s?in??el.shakeStart){

????????????????????css(el,s,?el.shakeStart[s]?+?nub);

????????????????}

????????????????move();

????????????}

????????});

????}

}????

shake.stop?=?function(el){

????cancelAnimationFrame(el.shake);

????el.shake?=?false;

????for(var?s?in??el.shakeStart){

????????css(el,s,?el.shakeStart[s]);

????}

};

(function(){

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

????box.onclick?=?function(){

????????shake.stop(box);

????????shake({

????????????el:?box,

????????????attr:?"left",

????????????shakeLength:?20,

????????????cb:?function(){

????????????????mTween({

????????????????????el:?box,

????????????????????attr:?{

????????????????????????top:?500

????????????????????},

????????????????????duration:?1000,

????????????????????fx:?"bounceOut"

????????????????});

????????????}

????????});

????};

})();

</script>


?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容