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="/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>
</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>
<div><A href="http://www.999jiujiu.com/">http://www.999jiujiu.com/</A></div>
</body>
</html>
版权声明：本文博主原创文章。博客，未经同意不得转载。
jQuery 代码的层定位滑动动画效果的更多相关文章
- 使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开，在页面的列表中有若干项，列表的每项中有一个二级列表，二级列表默认为隐藏状态。点击列表的项，切换二级列表的显示或隐藏状态
查看本章节 查看作业目录 需求说明: 使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开,在页面的列表中有若干项,列表的每项中有一个二级列表,二级列表默认为隐藏状态.点击列表的项,切 ...
- QPropertyAnimation 几行代码快速制作流畅的动画效果
QPropertyAnimation Class 官方英文文档[点击前往] QPropertyAnimation Class 中文译文文档[点击前往] 简介 QPropertyAnimation ...
- jquery 显示弹出层可利用动画效果
1 show()方法和hide()方法 $("selector").show() 从display:none还原元素默认或已设置的display属性$("selecto ...
- jQuery实现浮动层跟随页面滚动效果
helloweba.com Author:月光光 Time:2010-11-29 09:02 Tag: jquery 滚动 在本文中,我将介绍一个可以跟随页面滚动的层效果,当用户滚动鼠标滚轮或者 ...
- jQuery的动画效果
jQuery 是一个 JavaScript 库.jQuery 库可以通过一行简单的标记被添加到网页中. <script type="text/javascript" src= ...
- 【Android UI设计与开发】10：滑动菜单栏（二）SlidingMenu 动画效果的实现
其实就是在显示菜单栏时,有个动画的效果.代码比较简单,下面进行说明. 1.效果图如下,手机上查看效果更佳 2.代码实现,这里只讲解动画效果的实现,具体代码可在源代码中查看 <1> 先定义一 ...
- jQuery Easing动画效果扩展（转）
jQuery API提供了简单的动画效果如淡入淡出以及自定义动画效果,而今天我给大家分享的是一款jQuery动画效果扩展增强插件jquery.easing.js,使用该插件可以实现直线匀速运功.变加速 ...
- jquery动画效果中，避免持续反应用户的连续点击
一.某些动画效果中,避免持续连续反应用户的连续点击(这标题真不好描述) 意思就是指用户点击速度很快,完成一次效果的时间不能很快结束的话,就会出现用户不点击了,效果还在持续.看下面例子就明白了,手风琴效 ...
- jQuery Easing 动画效果扩展
jQuery API提供了简单的动画效果如淡入淡出以及自定义动画效果,而今天我给大家分享的是一款jQuery动画效果扩展增强插件jquery.easing.js,使用该插件可以实现直线匀速运功.变加速 ...
随机推荐
- POJ1182 食物链 【并查集变种】
挺简单的 N个元素扩展为 3*N个 i-A i-B i-C A吃B吃C吃A 挑战程序设计的89面 #include <cstdio> #include <cstdlib> #i ...
- C# 计算字符串/文件的哈希值（MD5、SHA）
原文 C# 计算字符串的哈希值(MD5.SHA) 已做修改 一.关于本文 本文中是一个类库,包括下面几个函数: /// 1)计算32位MD5码(大小写):Hash_MD5_32 /// 2)计算16位 ...
- 如何通过shell脚本操作MongoDB
通过shell脚本对MongoDB进行自动化操作 运行写好的 ./show.sh 脚本 发现能够建立mongo链接 #!/bin/sh mongo WordPress --eval "sho ...
- JVM必备指南（转）
本文由 ImportNew - xiafei 翻译自 anturis.欢迎加入翻译小组.转载请见文末要求. 简介 Java虚拟机(JVM)是Java应用的运行环境,从一般意义上来讲,JVM是通过规范来 ...
- poj Budget
Budget 建图好题.不知道为什么提交一直TLE. 然后.该了几次,看了别人的普通网络流都过了. 我觉得可能是卡DINIC的某些部分吧.这题就是一道普通的上下界最小流. 建图麻烦,所以说一下建图吧. ...
- 遇过的坑(2)—MyISAM表类型不支持事务操作
最近需要通过JDBC对数据库做事务型操作,实践时发现,并没有达到想要的效果,表现在:1.每次执行executeUpdate()后,数据就马上能在DB中查到.但按理来说,我还没执行commit(),DB ...
- 直接拿来用！最火的Android开源项目（三部完整版）
GitHub在中国的火爆程度无需多言,越来越多的开源项目迁移到GitHub平台上.更何况,基于不要重复造轮子的原则,了解当下比较流行的Android与iOS开源项目很是必要.利用这些项目,有时能够让你 ...
- FZU2082
树链剖分后要处理的是边的权值,而不是点的权值,但是只要边权下放到点,就可以了 如图 但是问题是,求图4->5路径的权值之和, 那么就会把点3给算进去 那么就要减去, 或者干脆不加进去 有两种方法 ...
- in与exist , not in与not exist 的区别(转)
in和exists in 是把外表和内表作hash 连接,而exists是对外表作loop循环,每次loop循环再对内表进行查询.一直以来认为exists比in效率高的说法是不准确的. 如果查询的 ...
- C++出现计算机术语5
class template(类模板) 可以用来定义一个类定义了一组特定类型的类的.类模板template keyword其次是尖括号(<>)附上.的列表来定义. export keywo ...