<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title>jquery Layer animation positioning </title> sliding
<style type= "Text/css" >
<!--
Body {
font-family: ' Signika negative ', sans-serif;
}
#head {
Z-index:10;
Position:absolute;
top:0;
left:0;
width:100%;
height:30px;
Border-color: #0055ff;
border-width:0 0 10px 0;
Border-style:solid;
Background: #0088ff;
}
#head li{
List-style:none;
Float:left;
Display:block;
height:30px;
padding:0 10px; 0 10px;
Cursor:pointer;
font-size:26px;
}
#head li:hover{
Color: #ffffff;
Background: #0055ff;
Border-color: #0011ff;
border-width:0 0 10px 0;
Border-style:solid;
}
#box {
Position:absolute;
top:0;
left:0;
width:100%;
height:100%;
Overflow:hidden;
}
#bg {
Position:absolute;
top:0;
left:0;
width:100%;
height:100%;
overflow:visible;
Background:;
}
. Cell {
width:100%;
height:100%;
Overflow:auto;
}
. list {
Position:absolute;
top:50%;
left:50%;
width:800px;
height:600px;
margin:-300px 0 0-400px;
Background: #0088ff;
}
#class_1 {
Position:absolute;
top:0;
left:0;
Background:;
}
#class_2 {
Position:absolute;
top:0;
left:100%;
Background:;
}
#class_3 {
Position:absolute;
top:0;
left:200%;
Background:;
}
#class_4 {
Position:absolute;
top:100%;
left:0;
Background:;
}
#class_5 {
Position:absolute;
top:100%;
left:100%;
Background:;
}
#class_6 {
Position:absolute;
top:100%;
left:200%;
Background:;
}
#class_7 {
Position:absolute;
top:200%;
left:0;
Background:;
}
#class_8 {
Position:absolute;
top:200%;
left:100%;
Background:;
}
#class_9 {
Position:absolute;
top:200%;
left:200%;
Background:;
}
-
</style>
<script type= "Text/javascript" src= "/ajaxjs/jquery-1.6.2.min.js" ></script>
<script type= "Text/javascript" >
$ (document). Ready (function ()
{
$ ("#l_01"). Click (function () {
$ ("#bg"). Stop (). Animate ({top:0+ "%", left:0+ "%"}, "slow");
});
$ ("#l_02"). Click (function () {
$ ("#bg"). Stop (). Animate ({top:0+ "%", left:-100+ "%"}, "slow");
});
$ ("#l_03"). Click (function () {
$ ("#bg"). Stop (). Animate ({top:0+ "%", left:-200+ "%"}, "slow");
});
$ ("#l_04"). Click (function () {
$ ("#bg"). Stop (). Animate ({top:-100+ "%", left:0+ "%"}, "slow");
});
$ ("#l_05"). Click (function () {
$ ("#bg"). Stop (). Animate ({top:-100+ "%", left:-100+ "%"}, "slow");
});
$ ("#l_06"). Click (function () {
$ ("#bg"). Stop (). Animate ({top:-100+ "%", left:-200+ "%"}, "slow");
});
$ ("#l_07"). Click (function () {
$ ("#bg"). Stop (). Animate ({top:-200+ "%", left:0+ "%"}, "slow");
});
$ ("#l_08"). Click (function () {
$ ("#bg"). Stop (). Animate ({top:-200+ "%", left:-100+ "%"}, "slow");
});
$ ("#l_09"). Click (function () {
$ ("#bg"). Stop (). Animate ({top:-200+ "%", left:-200+ "%"}, "slow");
});
});
</script>
<body>
<div id= "Head" >
<li id= "l_01" >1</li>
<li id= "l_02" >2</li>
<li id= "l_03" >3</li>
<li id= "L_04" >4</li>
<li id= "L_05" >5</li>
<li id= "l_06" >6</li>
<li id= "l_07" >7</li>
<li id= "l_08" >8</li>
<li id= "l_09" >9</li>
</div>
<div id= "box" >
<div id= "BG" >
<div class= "Cell" id= "Class_1" >
<div class= "List" ></div>
</div>
<div class= "Cell" id= "class_2" >
<div class= "List" ></div>
</div>
<div class= "Cell" id= "Class_3" >
<div class= "List" ></div>
</div>
<div class= "Cell" id= "Class_4" >
<div class= "List" ></div>
</div>
<div class= "Cell" id= "Class_5" >
<div class= "List" ></div>
</div>
<div class= "Cell" id= "Class_6" >
<div class= "List" ></div>
</div>
<div class= "Cell" id= "class_7" >
<div class= "List" ></div>
</div>
<div class= "Cell" id= "Class_8" >
<div class= "List" ></div>
</div>
<div class= "Cell" id= "Class_9" >
<div class= "List" ></div>
</div>
</div>
</div>
<div><a href= "http://www.999jiujiu.com/" >http://www.999jiujiu.com/</A></div>
</body>
Copyright notice: This article Bo Master original article. Blog, not reproduced without consent.
Layer positioning slide animation effect for jquery code
