<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery层动画定位滑动</title>
<style type="text/css">
body {
font-family: 'Signika Negative', sans-serif;
}
#head {
z-index: 10;
position: absolute;
top: 0;
left: 0;
100%;
height: 30px;
border-color: #0055ff;
border- 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- 0 0 10px 0;
border-style: solid;
}
#box {
position: absolute;
top: 0;
left: 0;
100%;
height: 100%;
overflow: hidden;
}
#bg {
position: absolute;
top: 0;
left: 0;
100%;
height: 100%;
overflow: visible;
background: ;
}
.cell {
100%;
height: 100%;
overflow: auto;
}
.list {
position: absolute;
top: 50%;
left: 50%;
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="js/jquery-1.10.2.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>