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,使用该插件可以实现直线匀速运功.变加速 ...
随机推荐
- UltraEdit破解方法最强收录
作为一个能够满足你一切编辑需求的强大文本编辑器.ultraedit在IT届有着非常高的人气.只是它正版的价钱也是不廉价滴,没记错的话是要好几十刀. 那么对于我们来说,破解UltraEdit就是一项必备 ...
- zoj1940（三维广搜）
题目链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=940 分析:三维其实就是六个方向地搜索,思维清晰且细心点,很快就AC了 ...
- 你属于几K（千）？
月薪2k.对出勤率负责:5k,对按时完毕率负责:8k,对质量负责:12k.对小团队的情绪负责:16k,对到款率负责:20k,要想着怎么保住自己的饭碗.40k.保住部门.100k.保住大部门:100k+ ...
- 用NMAKE创建VS2012 C++工程 HelloWorld
由于需要精通GDAL的源代码,所以还是有必要精通NMAKE,先来尝试创建一个NMAKE工程. 之前一篇文章Windows7中Emacs 24 shell使用Gitbash已经介绍了如何在Emacs的s ...
- 用java读写properties文件的代码
package com.LY; import java.io.BufferedInputStream; import java.io.FileInputStream; import java.io.F ...
- Velocity缓存与穿透(转)
原文 http://fantaxy025025.iteye.com/blog/2283904 主题 Java 总评:只是标记一下这种用法hack方法.这种场景下用这种方法还是比较雷人的. Veloc ...
- CSS之box-sizing的用处简介
前几天才发现有 box-sizing 这么个样式属性.研究了一番感觉非常有意思, 通过指定容器的盒子模型类型,达到不同的展示效果 比如:当一个容器宽度定义为 width:100%; 之后.假设再添加 ...
- set、env、export差分
set:显示当前shell变量,用户变量包含当前用户 env:显示用户变量 export:显示当前导出成用户变量的shell变量 举例来说: root@kali:~# aaa=bbb ...
- WPF对于xml的简单操作（上）
private void button1_Click(object sender, RoutedEventArgs e) { XmlTextWriter writer = new XmlTextWri ...
- HQApi命令行接口配置
执行的命令行前准备 在您的个人文件夹中第一次创建 型材client.properties 如下面 cd C:\Users\scnyli\ mkdir ".hq" 创建一个 clie ...