javascript提示抖动实现方法

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>

 

posted @ 2015-06-10 09:49  奔跑的蜗牛~  阅读(843)  评论(0编辑  收藏  举报