css代码:
<style type="text/css">
#div1{ width:200px; height:200px; background-color:orange; border:solid 5px #f0f0f0; position:absolute; left:600px; top:200px;}
</style>
js代码:
<script type="text/javascript">
window.onload=function(){
var oDiv=document.getElementById('div1');
oDiv.onclick=function(){
shake(oDiv,'left');
}
}
//封装抖动方法
function shake(obj,attr){
var arr=[];
var timer=null;
var num=0;
var pos=parseInt(getStyle(obj,attr)); //通过数组实现抖动的频率
for(var i=20;i>0;i-=2){
arr.push(i,-i);
}
arr.push(0); //设置定时器实现抖动
clearInterval(timer);
timer=setInterval(function(){
obj.style[attr]=pos+arr[num]+'px';
num++;
if(num==arr.length){
clearInterval(timer);
}
},20)
} //获取元素属性方法
function getStyle(obj,attr){
return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj,null)[attr];
}
</script>
HTML:
<body>
<div id="div1"></div>
</body>