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>
05-28 23:26