jQuery层动画定位滑动效果的方法
本文实例讲述了jQuery层动画定位滑动效果的方法。分享给大家供大家参考。具体实现方法如下：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery层动画定位滑动</title>
<styletype="text/css">
<!--
body{
font-family:'SignikaNegative',sans-serif;
}
#head{
z-index:10;
position:absolute;
top:0;
left:0;
width:100%;
height:30px;
border-color:#0055ff;
border-width:0010px0;
border-style:solid;
background:#0088ff;
}
#headli{
list-style:none;
float:left;
display:block;
height:30px;
padding:010px;010px;
cursor:pointer;
font-size:26px;
}
#headli:hover{
color:#ffffff;
background:#0055ff;
border-color:#0011ff;
border-width:0010px0;
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:-300px00-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>
<scripttype="text/javascript"src="js/jquery-1.6.2.min.js"></script>
<scripttype="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>
</head>
<body>
<divid="head">
<liid="l_01">1</li>
<liid="l_02">2</li>
<liid="l_03">3</li>
<liid="l_04">4</li>
<liid="l_05">5</li>
<liid="l_06">6</li>
<liid="l_07">7</li>
<liid="l_08">8</li>
<liid="l_09">9</li>
</div>
<divid="box">
<divid="bg">
<divclass="cell"id="class_1">
<divclass="list"></div>
</div>
<divclass="cell"id="class_2">
<divclass="list"></div>
</div>
<divclass="cell"id="class_3">
<divclass="list"></div>
</div>
<divclass="cell"id="class_4">
<divclass="list"></div>
</div>
<divclass="cell"id="class_5">
<divclass="list"></div>
</div>
<divclass="cell"id="class_6">
<divclass="list"></div>
</div>
<divclass="cell"id="class_7">
<divclass="list"></div>
</div>
<divclass="cell"id="class_8">
<divclass="list"></div>
</div>
<divclass="cell"id="class_9">
<divclass="list"></div>
</div>
</div>
</div>
</body>
</html>
希望本文所述对大家的jQuery程序设计有所帮助。