javascript實現的視窗抖動代碼實例:視窗抖動效果在很多地方都有應用，例如網易的登陸視窗就有這樣的效果，當登陸失敗的時候就會出現抖動效果，這不但有動感，而且讓人感覺新穎，下麵是一段這樣的代碼實例，和大家分享一下。代碼如下:視窗登陸效果-螞蟻部落 點擊振動 以上代碼中，當點擊按鈕的時候，...
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，為按鈕註冊事件處理函數。
三.相關閱讀:
1.setInterval()函數可以參閱setInterval()函數用法詳解一章節。
2.clearInterval()函數可以參閱window對象的clearInterval()方法一章節。
3.三運算符可以參閱三元運算符用法詳解一章節。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=8896
更多內容可以參閱:http://www.softwhy.com/javascript/
