码迷,mamicode.com
首页 > 编程语言 > 详细

javascript提示抖动实现方法

时间:2015-06-10 10:17:19      阅读:130      评论:0      收藏:0      [点我收藏+]

标签:

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>

 

javascript提示抖动实现方法

标签:

原文地址:http://www.cnblogs.com/lvmylife/p/4565238.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!