窗口抖動效果在很多地方都有應用，例如網易的登陸窗口就有這樣的效果，當登陸失敗的時候就會出現抖動效果，這不但有動感，而且讓人感覺新穎，下面是一段這樣的代碼實例，和大家分享一下。
代碼如下:
<!DOCTYPE HTML><html><head><meta charset="utf-8"/><meta name="author" content="http://www.softwhy.com/" /><title>窗口登陸效果</title><style type="text/css">#win{ position:relative; width:100px; height:100px; background-color:#666;}</style><script type="text/javascript"> var a=['top','left'];var b=0; var u;function fudu(){ win.style[a[b%2]]=(b++)%4<2?"0px":"4px"; if(b>15) { clearInterval(u); b=0 } }function zd(){ clearInterval(u); u=setInterval(fudu,32) } window.onload=function(){ var bt=document.getElementById("bt"); var win=document.getElementById("win"); bt.onclick=zd;}</script> </head> <body > <button id="bt">點擊振動</button> <div id="win"></div> </body> </html> 以上代碼中，當點擊按鈕的時候，div會出現抖動效果，當然此效果比較簡單，這里僅僅是演示之用，在實際應用中可以自行擴展，下面簡單介紹一下實現過程。
一.實現原理:
代碼簡單，原理也是非常簡單。div是采用相對定位，當點擊按鈕的時候，就會通過定時器函數setInterval()不斷調用fudu()函數，此函數可以通過取模的方式來不斷的設置left或者top的屬性值，也就是不斷隨機的調整div的位置，這樣就實現了抖動效果，當b的值大于15的時候，停止抖動。
二.代碼注釋:
1.var a=['top','left'],聲明一個數組，里面存儲有top和left字符串。
2.var b=0，聲明一個變量b并賦值為0。
3.var u，聲明一個變量，作為定時器函數setInterval()的返回值。
4.function fudu(){}，聲明一個函數。
5.win.style[a[b%2]]=(b++)%4<2?"0px":"4px"，此段代碼是核心部分，b%2取模運算的值為0或1，這樣就成為數組a的索引值用于獲取數組中的值。style[a[b%]這種形式和style.top這種形式的效果是一樣的。]]=(b++)%4<2?"0px":"4px"，這樣通過取模判斷值是否小于2，來對div的top和left屬性賦值。
6.if(b>15) {clearInterval(u); b=0} ，如果b的值大于15，那么就停止抖動，并將b的值重置為0。
7.function zd(){}，聲明一個函數。
8.clearInterval(u)，停止定時器函數的運行，這句代碼是為了防止連續點擊按鈕出現抖動可能不停止問題，因為兩個抖動互相影響。
9.u=setInterval(fudu,30)，使用定時器函數不斷調用fudu函數。
10.window.onload=function(){}，當文檔內容完全加載完畢再去執行函數中的代碼。
11.var bt=document.getElementById("bt")，獲取按鈕對象。
12.var win=document.getElementById("win")，獲取div對象。
13.bt.onclick=zd，為按鈕注冊事件處理函數。
下面給大家介紹仿QQ窗口抖動的JavaScript代碼
很不借的抖動特效，仿QQ聊天窗口的抖動效果，這里是用JavaScript代碼實現，在配上這個假聊天窗口，沒想到竟然和QQ的抖動效果還真相似，挺逗人。
<title>仿QQ窗口抖動</title><img id="win" style='position:relative' src="/jscss/demoimg/qqwinows.jpg"><br /><br /><button onclick="zd()">讓我抖一下！</button><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>通過以上實例代碼給大家介紹javascript實現窗口抖動及qq窗口抖動的相關內容，希望本段代碼能夠幫助到大家。
新聞熱點
疑難解答
