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