實例程式碼詳解javascript實作視窗抖動及qq視窗抖動_javascript技巧
- WBOY原創
- 2016-05-16 15:22:141053瀏覽
視窗抖動效果在許多地方都有應用，例如網易的登陸窗口就有這樣的效果，當登陸失敗的時候就會出現抖動效果，這不但有動感，而且讓人感覺新穎，下面是一段這樣的程式碼實例，跟大家分享一下。
程式碼如下:
<!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
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視窗抖動的相關內容，希望本段程式碼能夠幫助大家。