Detailed example code explanation of javascript implementation of window jitter and qq window jitter

Detailed example code explanation of javascript implementation of window jitter and qq window jitter_javascript skills

WBOY

Release： 2016-05-16 15:22:14

Original

1083 people have browsed it

The window jitter effect is used in many places. For example, NetEase's login window has this effect. When the login fails, a jitter effect will appear. This is not only dynamic, but also makes people feel novel. Here is a paragraph like this I would like to share the code example with you.

The code is as follows:

<!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&#63;"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>

Copy after login

In the above code, when the button is clicked, the div will have a jitter effect. Of course, this effect is relatively simple. This is just for demonstration. It can be expanded in actual applications. Here is a brief introduction to the implementation process.

1. Implementation principle:

The code is simple and the principle is also very simple. The div adopts relative positioning. When the button is clicked, the fudu() function will be continuously called through the timer function setInterval(). This function can continuously set the attribute value of left or top through the modulo method, that is, continuously Randomly adjust the position of the div to achieve a jittering effect. When the value of b is greater than 15, the jittering will stop.

2. Code comments:

1.var a=['top','left'], declares an array that stores top and left strings.
2.var b=0, declare a variable b and assign it a value of 0.
3.var u, declare a variable as the return value of the timer function setInterval().
4.function fudu(){}, declare a function.
5.win.style[a[b%2]]=(b++)%4<2?"0px":"4px", this code is the core part, the value of b%2 modulo operation is 0 or 1, This becomes the index value of array a and is used to obtain the value in the array. The effect of style[a[b%] and style.top is the same. ]]=(b++)%4<2?"0px":"4px", in this way, the top and left attributes of the div can be assigned values by taking the modulo to determine whether the value is less than 2.
6.if(b>15) {clearInterval(u); b=0}, if the value of b is greater than 15, then stop dithering and reset the value of b to 0.
7.function zd(){}, declare a function.
8. clearInterval(u), stops the running of the timer function. This code is to prevent the problem of jitter that may not stop when the button is continuously clicked, because the two jitters affect each other.
9.u=setInterval(fudu,30), use the timer function to continuously call the fudu function.
10.window.onload=function(){}, execute the code in the function when the document content is completely loaded.
11.var bt=document.getElementById("bt"), get the button object.
12.var win=document.getElementById("win"), get the div object.
13.bt.onclick=zd, register the event handler function for the button.

The following is a JavaScript code that imitates QQ window shaking

A very unique shaking effect, imitating the shaking effect of QQ chat window. It is implemented with JavaScript code. With this fake chat window, I didn’t expect that it is really similar to the shaking effect of QQ. It’s quite funny.

<title>仿QQ窗口抖动</title>
<img id="win" style='position:relative' src="/jscss/demoimg/qqwinows.jpg">
<br /><br />
<button onclick="zd()">让我抖一下！</button>
<script >
function zd(u){ 
 var a=['top','left'],b=0;
 u=setInterval(function(){
 document.getElementById('win').style[a[b%2]]=(b++)%4<2&#63;0:4;
 if(b>15){clearInterval(u);b=0}
 },32)
}
</script>

Copy after login

Through the above example code, I will introduce to you the implementation of window jitter and QQ window jitter using JavaScript. I hope this code can help you.