js实现抖动效果的两种简单方法

2017年07月25日 12:15:35益点益滴1754

被QQ抖过窗口的你一定会对这种特效印象深刻吧,那么我们是否能在网页中实现这种效果呢?答案当然是肯定的,其实实现原理很简单,下面就为大家简单介绍下js中时如何实现的,喜欢的朋友可以参考下

下面这种支持浏览器(部分)主窗口的抖动,也可支持浏览器网页内指定的某个元素抖动,类似QQ的聊天窗口一样,很有意思:

<title>窗口抖动-www.yiwuku.com</title>
<style>
body{margin:50px; }
#qq{position:relative;}
span{padding:0 4px}
</style>
<body>
<p><button onclick="mfx()">图片抖动</button>
 <span></span><button onclick="mfx(1)">浏览器抖动</button></p>
<img id="qq" src="https://www.baidu.com/img/bd_logo1.png"  />
</body>
<script>
mfx=function(isWin){
	var t=0,z=3,del=function(){clearInterval(mfx.ID);return mfx};
	del().ID=setInterval(function(){
		var i=t/180*Math.PI,x=Math.sin(i)*z,y=Math.cos(i)*z,s=qq.style;
		isWin?window.moveBy(x,y):(s.top=x+'px',s.left=y+'px');
		if((t+=90)>1080)del();
	},30);
}
</script>

第二种抖动浏览器窗口(实际上是控制body)兼容性更高一些:

<html> 
<head> 
<title> New Document - www.yiwuku.com</title> 
<meta name="Generator" content="EditPlus"> 
<meta name="Author" content=""> 
<meta name="Keywords" content=""> 
<meta name="Description" content=""> 

<script > 

function zd(u){ 
var a=['top','left'],b=0; 
u=setInterval(function(){ 
document.getElementById('win').style[a[b%2]]=(b++)%4<2?0:4; 
if(b>15){clearInterval(u);b=0} 
},32) 
} 
</script> 

</head> 

<body id="win" style='position:relative;' border="1"> 
<button onclick="zd()">振动</button> 

<div >asdfasdf<div/> 
</body> 
</html>

超赞,真给力!嗯,必须鼓励~

打赏 0

欢迎点评!或反馈疑问...

支持Ctrl+Enter提交
暂无留言,快抢沙发!
账号:mxy310@163.com[复制]
账号:77940140[复制]