小米網登入視窗抖動函數實現

標籤：

      之前經常在小米網上買東西，發現小米網站的登入驗證做得挺有特色的。當使用者名稱或密碼輸入錯誤的時候會像“搖頭”似得抖一抖，略微想了一下，發現實現的方式挺簡單的，所以今天下午花了一點時間想了一下，以下是我的思路和代碼。

       要實現抖動，需要實現一下幾步：

1,擷取當前元素的位置作為初始位置。2,設定定時器迴圈改變元素的位置，每次左右移動一次比上一次移動少一點點距離，直到停止到初始位置。3,觸發調用

 小米網使用一個 div 元素放置表單元素， div 元素水平置中，並設定定位方式為 relative ，以便文字框能夠依據父元素 div 作參照左右移動。這裡我使用一張圖片來代替文字框，HTML代碼如下:

<div class="main">    <img src="cai.jpg" id="cai" /></div>

CSS代碼如下:

.main{width:300px; margin:20px auto; position:relative;}#cai{width:300px; position:absolute; top:0; left:0; cursor:pointer;}

 JavaScript代碼如下:

 1 window.onload = function(){ 2         var cai = document.getElementById("cai"); 3          4         function shake(obj,attr){ 5             var _this = obj; 6             shake.pos = shake.pos ? shake.pos : parseInt(getStyle(_this,attr)); 7             var arr = []; 8             for(var i=20;i>0;i-=2){ 9                 arr.push(i,-i);10             }11             arr.push(0);12             shake.timer = null;13             clearInterval(shake.timer);14             shake.num = 0;15             shake.timer = setInterval(function(){16                 _this.style[attr] = shake.pos + arr[num] + "px";17                 shake.num++;18                 if(shake.num>arr.length) clearInterval(shake.timer);19             },20);20         }21 22         function getStyle(obj,attr){23             return getComputedStyle(obj,null)[attr] ? getComputedStyle(obj,null)[attr] : obj.currentStyle[attr];24         }25         26         cai.onclick = function(){27             shake(this,"left");28         };29     }

        有幾個需要注意的地方，首先是為了相容IE瀏覽器，我們需要在取元素初始位置的時候進行相容性處理。我們知道W3C的方法是 window.getComputedStyle(obj,null)[attr] ,而IE專屬的方法是 obj.currentStyle[attr] 。

       為了保證在連續點擊的時候初始位置的擷取不出錯，只需要在第一次點擊的時候將初始位置儲存下來即可，之後便可直接使用該屬性值，我們需要判斷是不是第一次點擊： shake.pos = shake.pos ? shake.pos : parseInt(getStyle(_this,attr)); 

       為了能實現我們最開始說的第二點，我們可以迴圈產生一個包含移動位置的數組。列印出來我們產生的數組如下所示：

最後就是調用了，在小米網中使用者名稱或密碼輸入錯誤之後實際上是執行了一次ajax通訊過程，所以會有回呼函數。我們可以將回呼函數作為參數傳進去，在抖動結束之後執行。

除了可以左右抖動之外，我們可以試著把參數 left 改成 top 傳進去，這樣就能實現上下抖動了。

       

小米網登入視窗抖動函數實現