封装好的抖动函数 shake

最新推荐文章于 2020-03-03 13:45:03 发布

原创最新推荐文章于 2020-03-03 13:45:03 发布 · 置顶 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#抖动函数 #shake #javascript #JS封装好的抖动函数 #原生抖动函数

Javascript 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的抖动效果封装方法，并通过一个示例展示了如何防止连续点击导致元素位置偏移的问题。

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