封装好的 抖动函数 shake
诸新霁
-
- 抖动函数
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 ..... 0var 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==trueclearInterval( 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>
类似资料：