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


Posted in Javascript onApril 30, 2015

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
javascript 变量作用域 代码分析
Jun 26 Javascript
javascript中onclick(this)用法介绍
Apr 19 Javascript
js判断浏览器类型为ie6时不执行
Jun 15 Javascript
js生成验证码并直接在前端判断
May 15 Javascript
JS控制静态页面之间传递参数获取参数并应用的简单实例
Aug 10 Javascript
使用BootStrapValidator完成前端输入验证
Sep 28 Javascript
NODE.JS跨域问题的完美解决方案
Oct 20 Javascript
用jQuery实现优酷首页轮播图
Jan 09 Javascript
Angular中使用$watch监听object属性值的变化(详解)
Apr 24 Javascript
angular实现spa单页面应用实例
Jul 10 Javascript
JavaScript 中的无穷数(Infinity)详解
Feb 13 Javascript
vue keep-alive实现多组件嵌套中个别组件存活不销毁的操作
Oct 30 Javascript
jquery中$each()方法的使用指南
Apr 30 #Javascript
jQuery实现手机号码输入提示功能实例
Apr 30 #Javascript
javascript实现checkbox全选的代码
Apr 30 #Javascript
javascript实现的固定位置悬浮窗口实例
Apr 30 #Javascript
Js与Jq 获取页面元素值的方法和差异对比
Apr 30 #Javascript
js兼容pc端浏览器并有多种弹出小提示的手机端浮层控件实例
Apr 29 #Javascript
js实现支持手机滑动切换的轮播图片效果实例
Apr 29 #Javascript
You might like
探讨PHP调用时间格式的参数详解
2013/06/06 PHP
浅谈PHP中如何实现Hook机制
2017/11/14 PHP
XHTML下,JS浮动代码失效的问题
2009/11/12 Javascript
jQuery图片播放8款精美插件分享
2013/02/17 Javascript
jQuery调用AJAX时Get和post公用的乱码解决方法实例说明
2013/06/04 Javascript
jquery 设置元素相对于另一个元素的top值(实例代码)
2013/11/06 Javascript
jQuery 事件的命名空间简单了解
2013/11/22 Javascript
JavaScript实现获得所有兄弟节点的方法
2015/07/23 Javascript
javascript中alert()与console.log()的区别
2015/08/26 Javascript
Backbone View 之间通信的三种方式
2016/08/09 Javascript
js前端面试题及答案整理(一)
2016/08/26 Javascript
完美解决UI-Grid表格元素中多个空格显示为一个空格的问题
2017/04/25 Javascript
js简易版购物车功能
2017/06/17 Javascript
JS简单添加元素新节点的方法示例
2018/02/10 Javascript
JavaScript异步加载问题总结
2018/02/17 Javascript
JavaScript使用prototype原型实现的封装继承多态示例
2018/08/31 Javascript
JS异步执行结果获取的3种解决方式
2019/02/19 Javascript
[02:42]2014DOTA2国际邀请赛 三冰专访:我会打到Ti20
2014/07/13 DOTA
[07:54]DOTA2 MV《我的动力鞋》 ImbaTV 出品
2014/11/21 DOTA
[04:23]DOTA2上海特锦赛小组赛第一日 TOP10精彩集锦
2016/02/27 DOTA
python使用百度翻译进行中翻英示例
2014/04/14 Python
python处理圆角图片、圆形图片的例子
2014/04/25 Python
Python中字符编码简介、方法及使用建议
2015/01/08 Python
python实现12306火车票查询器
2017/04/20 Python
Python3非对称加密算法RSA实例详解
2018/12/06 Python
selenium3+python3环境搭建教程图解
2018/12/07 Python
解决selenium+Headless Chrome实现不弹出浏览器自动化登录的问题
2021/01/09 Python
解决HTML5中的audio在手机端和微信端的不能自动播放问题
2019/11/04 HTML / CSS
俄罗斯最大的灯具网站:Fandeco
2020/03/14 全球购物
上海中网科技笔试题
2012/02/19 面试题
安全资料员岗位职责
2013/12/14 职场文书
电大毕业自我鉴定
2014/02/03 职场文书
毕业设计说明书
2014/05/07 职场文书
三八妇女节趣味活动方案
2014/08/23 职场文书
教师见习总结范文
2015/06/23 职场文书
goland 清除所有的默认设置操作
2021/04/28 Golang