快捷導(dǎo)航

實(shí)例代碼詳解javascript實(shí)現(xiàn)窗口抖動(dòng)及qq窗口抖動(dòng)

更新時(shí)間：2016年01月04日 09:15:41 作者：愚蠢的神

這篇文章主要介紹了實(shí)例代碼詳解javascript實(shí)現(xiàn)窗口抖動(dòng)及qq窗口抖動(dòng)的相關(guān)資料,需要的朋友可以參考下

窗口抖動(dòng)效果在很多地方都有應(yīng)用，例如網(wǎng)易的登陸窗口就有這樣的效果，當(dāng)?shù)顷懯〉臅r(shí)候就會(huì)出現(xiàn)抖動(dòng)效果，這不但有動(dòng)感，而且讓人感覺新穎，下面是一段這樣的代碼實(shí)例，和大家分享一下。

代碼如下:

<!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">點(diǎn)擊振動(dòng)</button> 
<div id="win"></div> 
</body> 
</html>

以上代碼中，當(dāng)點(diǎn)擊按鈕的時(shí)候，div會(huì)出現(xiàn)抖動(dòng)效果，當(dāng)然此效果比較簡(jiǎn)單，這里僅僅是演示之用，在實(shí)際應(yīng)用中可以自行擴(kuò)展，下面簡(jiǎn)單介紹一下實(shí)現(xiàn)過程。

一.實(shí)現(xiàn)原理:

代碼簡(jiǎn)單，原理也是非常簡(jiǎn)單。div是采用相對(duì)定位，當(dāng)點(diǎn)擊按鈕的時(shí)候，就會(huì)通過定時(shí)器函數(shù)setInterval()不斷調(diào)用fudu()函數(shù)，此函數(shù)可以通過取模的方式來不斷的設(shè)置left或者top的屬性值，也就是不斷隨機(jī)的調(diào)整div的位置，這樣就實(shí)現(xiàn)了抖動(dòng)效果，當(dāng)b的值大于15的時(shí)候，停止抖動(dòng)。

二.代碼注釋:

1.var a=['top','left'],聲明一個(gè)數(shù)組，里面存儲(chǔ)有top和left字符串。
2.var b=0，聲明一個(gè)變量b并賦值為0。
3.var u，聲明一個(gè)變量，作為定時(shí)器函數(shù)setInterval()的返回值。
4.function fudu(){}，聲明一個(gè)函數(shù)。
5.win.style[a[b%2]]=(b++)%4<2?"0px":"4px"，此段代碼是核心部分，b%2取模運(yùn)算的值為0或1，這樣就成為數(shù)組a的索引值用于獲取數(shù)組中的值。style[a[b%]這種形式和style.top這種形式的效果是一樣的。]]=(b++)%4<2?"0px":"4px"，這樣通過取模判斷值是否小于2，來對(duì)div的top和left屬性賦值。
6.if(b>15) {clearInterval(u); b=0} ，如果b的值大于15，那么就停止抖動(dòng)，并將b的值重置為0。
7.function zd(){}，聲明一個(gè)函數(shù)。
8.clearInterval(u)，停止定時(shí)器函數(shù)的運(yùn)行，這句代碼是為了防止連續(xù)點(diǎn)擊按鈕出現(xiàn)抖動(dòng)可能不停止問題，因?yàn)閮蓚€(gè)抖動(dòng)互相影響。
9.u=setInterval(fudu,30)，使用定時(shí)器函數(shù)不斷調(diào)用fudu函數(shù)。
10.window.onload=function(){}，當(dāng)文檔內(nèi)容完全加載完畢再去執(zhí)行函數(shù)中的代碼。
11.var bt=document.getElementById("bt")，獲取按鈕對(duì)象。
12.var win=document.getElementById("win")，獲取div對(duì)象。
13.bt.onclick=zd，為按鈕注冊(cè)事件處理函數(shù)。

下面給大家介紹仿QQ窗口抖動(dòng)的JavaScript代碼

很不借的抖動(dòng)特效，仿QQ聊天窗口的抖動(dòng)效果，這里是用JavaScript代碼實(shí)現(xiàn)，在配上這個(gè)假聊天窗口，沒想到竟然和QQ的抖動(dòng)效果還真相似，挺逗人。

<title>仿QQ窗口抖動(dòng)</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>

通過以上實(shí)例代碼給大家介紹javascript實(shí)現(xiàn)窗口抖動(dòng)及qq窗口抖動(dòng)的相關(guān)內(nèi)容，希望本段代碼能夠幫助到大家。

您可能感興趣的文章: