首页 > 编程语言 > 详细

javascript提示抖动实现方法

时间:2015-06-10 10:15:24      阅读:236      评论: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
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!