您的位置：首页 > 编程语言 > Java开发

封装好的 抖动函数 shake

2016-09-12 08:36 106 查看 


抖动函数
shake
封装

function shake ( obj, attr, endFn ) {


var pos = parseInt( getStyle(obj, attr) );


var arr = []; // 20, -20, 18, -18 ..... 0


var num = 0;




for ( var i=20; i>0; i-=2 ) {


arr.push( i, -i );


}


arr.push(0);




clearInterval( obj.shake );


obj.shake = setInterval(function (){


obj.style[attr] = pos + arr[num] + 'px';


num++;


if ( num === arr.length ) {


clearInterval( obj.shake );


endFn && endFn();


}


}, 50);


}


function getStyle(obj, attr ){


return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr];


}


解析：shake ( obj, attr, endFn )

obj --> 抖动对象
attr --> 抖动的方向 top / left 要加引号
endfn --> 回调函数 、 可有可无
ps:attr
传参时 要加 引号

解决连续点击会改变元素的位置示例：给元素身上加个开关

示例：

<!DOCTYPE html>

<html>

<head>

<title></title>

<meta charset="UTF-8">

<style>

html,body{margin:0;}

#div1{

width:100px;

height:100px;

background:red;

position:absolute;

margin:50px 100px;

}

</style>

<script>

window.onload=function(){

var adiv=document.getElementById('div1');

adiv.onoff=true;

adiv.onclick=function(){

var a=parseInt(getStyle(adiv,'left'))+parseInt(adiv.offsetLeft)

shake ( adiv,'left', function(){adiv.onoff=true});

  }

function shake ( obj, attr, endFn ) {

var pos = parseInt( getStyle(obj, attr) );

var arr = [];           // 20, -20, 18, -18 ..... 0

var num = 0;

for ( var i=20; i>0; i-=2 ) {

arr.push( i, -i );

}

arr.push(0);

if ( obj.onoff) {

clearInterval( obj.shake );

obj.shake = setInterval(function (){

obj.onoff=false;

obj.style[attr] = pos + arr[num] + 'px';

num++;

if ( num === arr.length ) {

obj.onoff==true

        clearInterval( obj.shake );

endFn && endFn();

  }

}, 50);

}

}

function getStyle(obj, attr ){

return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr];

}

}

</script>

</head>

<body>

<div id="div1"></div>

</body>

</html>

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                抖动函数
                                                shake
                                                javascript
                                                JS封装好的抖动函数
                                                原生抖动函数
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                

                    
                

            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航