The realization of jitter function in Millet Net login window

Before often on the Xiaomi online shopping, found that Xiaomi website login verification to do quite a feature. When the user name or password input error will be like "Shake your head" as if shaking a shake, a little thought, found the way to implement quite simple, so this afternoon spent a bit of time to think about it, the following is my ideas and code.

To achieve jitter, you need to implement a few steps:

1, gets the position of the current element as the initial position. 2, set the timer loop to change the position of the element, each time left and right to move a little bit less than the previous move, until the initial position is stopped. 3, triggering call

The Xiaomi Web uses a div element to place the form elements, the div element is centered horizontally, and the positioning method is set to relative so that the text box can be moved left and right according to the parent element Div . Here I use a picture to replace the text box, the HTML code is as follows:

<class= "main">    <src= " Cai.jpg "  ID=" Cai "/></div>

The CSS code is as follows:

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

The JavaScript code is as follows:

1Window.onload =function(){2         varCai = document.getElementById ("Cai"));3         4         functionShake (obj,attr) {5             var_this =obj;6Shake.pos = Shake.pos?shake.pos:parseInt (GetStyle (_this,attr));7             vararr = [];8              for(vari=20;i>0;i-=2){9Arr.push (i,-i);Ten             } OneArr.push (0); AShake.timer =NULL; - clearinterval (shake.timer); -Shake.num = 0; theShake.timer = SetInterval (function(){ -_THIS.STYLE[ATTR] = Shake.pos + Arr[num] + "px"; -shake.num++; -                 if(shake.num>arr.length) clearinterval (shake.timer); +},20); -         } +  A         functionGetStyle (obj,attr) { at             returngetComputedStyle (obj,NULL) [attr]? getComputedStyle (obj,NULL) [attr]: obj.currentstyle[attr]; -         } -          -Cai.onclick =function(){ -Shake This, "left"); -         }; in}

There are a few things to be aware of, first of all, in order to be compatible with IE, we need to do compatibility when taking the initial position of the element. We know that the method is window.getcomputedstyle (obj,null) [attr] , and IE unique method is obj.currentstyle[attr] .

In order to ensure that the initial position at the time of continuous Click is not wrong, just to save the initial position at the first click, you can directly use the property value, we need to determine whether the first click: shake.pos = shake.pos? Shake.pos: parseint (GetStyle (_this,attr));

In order to achieve the 2nd we started with, we can loop through an array that contains a moving position. To print out the array we generated is as follows:

The last is called, in the Xiaomi network after the user name or password input error is actually performed an AJAX communication process, so there will be a callback function. We can pass the callback function as a parameter and execute it after the jitter is over.

In addition to the jitter can be left and right, we can try to change the parameter left to top pass in, so that can achieve up and down jitter.

The realization of jitter function in Millet Net login window