Example code details JavaScript Implementation window jitter and QQ window jitter _javascript Skills

Window jitter effect in many places have applications, such as NetEase Landing window has such an effect, when landing failure will appear jitter effect, this is not only dynamic, but also make people feel new, the following is a section of such code examples, and you share.

The code is as follows:

<! DOCTYPE html>
 
 

The above code, when clicked the button, the div will appear jitter effect, of course, this effect is relatively simple, here is only the use of demonstration, in the actual application can be expanded, the following simple introduction to the implementation process.

I. Principle of realization:

The code is simple and the principle is very simple. Div is the use of relative positioning, when clicked on the button, it will pass the timer function setinterval () constantly call the Fudu () function, this function can be modeled by the way to constantly set left or top property values, that is, constantly randomly adjust div position, This realizes the jitter effect, when the value of B is greater than 15, stop jitter.

Two. Code comments:

1.var a=[' top ', ' left ', declares an array with top and left strings stored.
2.var b=0, declare a variable B and assign a value of 0.
3.var u, declare a variable as the return value of the timer function setinterval ().
4.function Fudu () {}, declaring a function.
5.win.style[a[b%2]]= (b++)%4<2? " 0px ": 4px", this code is the core, the b%2 modulo operation of the value of 0 or 1, so that the index value of array A is used to get the values in the array. Style[a[b%] The effect of this form and Style.top is the same. ]]= (b++)%4<2? " 0px ": 4px" To assign values to the top and left properties of a div by determining whether the value is less than 2 by modulo.
6.if (b>15) {clearinterval (U); b=0}, if the value of B is greater than 15, stop the jitter and reset the value of B to 0.
7.function Zd () {}, declaring a function.
8.clearInterval (U), stop the operation of the timer function, this code is to prevent the continuous click button Jitter may not stop the problem, because two jitter affect each other.
9.u=setinterval (fudu,30), use the Timer function to constantly invoke the Fudu function.
10.window.onload=function () {} to execute code in the function when the contents of the document are completely loaded.
11.var Bt=document.getelementbyid ("BT") to get the button object.
12.var Win=document.getelementbyid ("Win") to get the Div object.
13.BT.ONCLICK=ZD, registers the event handler function for the button.

below to introduce you to imitate QQ window jitter JavaScript code

Very do not borrow the jitter effects, imitation QQ Chat window jitter effect, here is to use JavaScript code to achieve, in with this fake chat window, unexpectedly and QQ jitter effect is really similar, very cute.

<title> Imitation QQ window jitter </title>

<br/><br/>
<button onclick=" ZD () > Let me Shake it! </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>

Through the above example code to introduce JavaScript to achieve window jitter and QQ window jitter related content, I hope this code can help everyone.