JavaScript 視窗抖動效果

admin發表於2019-01-18
JavaScript

視窗抖動效果在很多地方都有應用，比如使用者登入。

當登陸失敗的時候就會出現抖動效果，這不但有動感，而且讓人感覺新穎。

下面就分享一段具有類似功能的程式碼。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!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()方法參閱JavaScript setInterval()一章節。

（2）.clearInterval()方法參閱JavaScript clearInterval()一章節。

（3）.三運算子參閱JavaScript  三元運算子一章節。

相關文章