jQuery元素动画方式滑动效果
分类：实例代码
本章节分享一段代码实例，它实现了利用jQuery的animate()方法实现元素滑动效果。
代码实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<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;
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;
}
.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;
}
#class_2{
position:absolute;
top:0;
left:100%;
}
#class_3{
position:absolute;
top:0;
left:200%;
}
#class_4{
position:absolute;
top:100%;
left:0;
}
#class_5{
position:absolute;
top:100%;
left:100%;
}
#class_6 {
position:absolute;
top:100%;
left:200%;
}
#class_7{
position:absolute;
top:200%;
left:0;
}
#class_8{
position:absolute;
top:200%;
left:100%;
}
#class_9{
position:absolute;
top:200%;
left:200%;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.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>
</head>
<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>
</body>
</html>