javascript提示抖动实现方法

最新推荐文章于 2023-07-05 11:26:43 发布

weixin_33830216

最新推荐文章于 2023-07-05 11:26:43 发布

阅读量221

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/lvmylife/p/4565238.html

版权

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.οnlοad=function(){			
	　　var oDiv=document.getElementById('div1');		
	　　oDiv.οnclick=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>

转载于:https://www.cnblogs.com/lvmylife/p/4565238.html

weixin_33830216

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
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代码：...
复制链接

扫一扫