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>
时间： 2024-10-25 07:13:21