小米网登录窗口抖动函数实现

浏览数：27 / 时间：2015年06月11日

之前经常在小米网上买东西，发现小米网站的登录验证做得挺有特色的。当用户名或密码输入错误的时候会像“摇头”似得抖一抖，略微想了一下，发现实现的方式挺简单的，所以今天下午花了一点时间想了一下，以下是我的思路和代码。

要实现抖动，需要实现一下几步：

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     }