js实现抖动效果的两种简单方法
被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>
