jQuery层动画定位滑动效果的方法

前端技术 2023/09/08 JavaScript

本文实例讲述了jQuery层动画定位滑动效果的方法。分享给大家供大家参考。具体实现方法如下：

<!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;
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=\"js/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>
</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>

希望本文所述对大家的jQuery程序设计有所帮助。

本文地址：https://www.stayed.cn/item/20845

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案