This paper illustrates the implementation of the jquery shaking layer effect. Share to everyone for your reference. The implementation methods are as follows:
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html" charset= "Utf-8"/>
<title>jquery Shaking Layer </title>
<style type= "Text/css" >
Body {font:12px Georgia, serif;}
a {text-decoration:none;}
#header {margin:50px Auto}
#header P{text-align:center;font-size:16px;font-weight:bold}
#box {width:400px;height:200px;background-color: #ccc; Text-align:center}
</style>
<script type= "Text/javascript" src= "Js/jquery-1.6.2.min.js" ></script>
<script type= "Text/javascript" >
var box_left = 0;
$ (document). Ready (function () {
Box_left = ($ (window). Width ()-$ (' #box '). Width ())/2;
$ (' #box, #footer '). css ({' Left ': box_left, ' position ': ' absolute '});
});
Function Shock ()
{
for (i = 1; i < 7; i++)
{
$ (' #box '). Animate ({
' Left ': '-=15 '
}, 3, function () {
$ (this). Animate ({
' Left ': ' +=30 '
}, 3, function () {
$ (this). Animate ({
' Left ': '-=15 '
}, 3, function () {
$ (this). Animate ({
' Left ': box_left
}, 3, function () {
Shock End
});
});
});
});
}
}
</script>
<body>
<div id= "Header" >
<p> Imitation WP Background login error when left or right shaking a layer </p>
</div>
<div id= "box" ><a href= "#" onclick= "shock (); return false;" > Click me to view Effects </a></div>
</body>
I hope this article will help you with your jquery programming.
