封装好的抖动函数 shake

来源：互联网发布：即时战略推荐知乎编辑：程序博客网时间：2024/06/17 22:41

抖动函数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>

1 0

封装好的 抖动函数 shake

封装好的抖动函数 shake