首頁 > 開發者 > JavaScript
視窗抖動效果在很多地方都有應用，例如網易的登陸視窗就有這樣的效果，當登陸失敗的時候就會出現抖動效果，這不但有動感，而且讓人感覺新穎，下面是一段這樣的代碼執行個體，和大家分享一下。
代碼如下:
<!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視窗抖動的相關內容，希望本段代碼能夠協助到大家。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
