search

Home  >  Article  >  Web Front-end  >  Implement window shaking effect based on javascript_javascript skills

Implement window shaking effect based on javascript_javascript skills

WBOY
WBOYOriginal
2016-05-16 15:22:061089browse

The example in this article explains the detailed code to achieve the window jitter effect based on javascript, and shares it with everyone for your reference. The specific content is as follows

Rendering:

Click the mouse and the window will shake.

Specific code: 

<!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312"/>
<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>

I hope this article will help you learn JavaScript programming and help you achieve the window shaking effect.

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：Bootstrap implements pop-up and drag effects_javascript skillsNext article：Bootstrap implements pop-up and drag effects_javascript skills

Related articles

See more