Home >Web Front-end >JS Tutorial >Detailed example code explanation of javascript implementation of window jitter and qq window jitter_javascript skills

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

WBOYOriginal: 2016-05-16 15:22:141110browse

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>

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++)%4a482b482b9cb27d0f7680109349bea9c15) {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>

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.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：js implementation code for picture-in-picture advertising in the information page (how to load ads in the text)_javascript skillsNext article：js implementation code for picture-in-picture advertising in the information page (how to load ads in the text)_javascript skills

See more

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

Related articles