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 相关文章推荐
jQuery 获取对象 根据属性、内容匹配, 还有表单元素匹配
May 31 Javascript
探索Emberjs制作一个简单的Todo应用
Nov 07 Javascript
通过js获取div的background-image属性
Oct 15 Javascript
js获取客户端外网ip的简单实例
Nov 21 Javascript
jQuery获取选中内容及设置元素属性的方法
Jul 09 Javascript
jQuery设置和移除文本框默认值的方法
Mar 09 Javascript
详解js中class的多种函数封装方法
Jan 03 Javascript
浅谈javascript中的constructor
Jun 08 Javascript
JavaScript奇技淫巧44招【实用】
Dec 11 Javascript
vue-cli + sass 的正确打开方式图文详解
Oct 27 Javascript
Vue 父子组件的数据传递、修改和更新方法
Mar 01 Javascript
Vue.js进阶知识点总结
Apr 01 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
索尼SONY ICF-7600A(W)电路分析
2021/03/01 无线电
PHP4实际应用经验篇(2)
2006/10/09 PHP
js下关于onmouseout、事件冒泡的问题经验小结
2010/12/09 Javascript
jQuery使用技巧简单汇总
2013/04/18 Javascript
Javascript实现滚动图片新闻的实例代码
2013/11/27 Javascript
js判断客户端是iOS还是Android等移动终端的方法
2013/12/11 Javascript
javascript 获取函数形参个数
2014/07/31 Javascript
详解JavaScript中的客户端消息框架设计原理
2015/06/24 Javascript
CSS javascript 结合实现悬浮固定菜单效果
2015/08/23 Javascript
WebApi+Bootstrap+KnockoutJs打造单页面程序
2016/05/16 Javascript
JS获取input file绝对路径的方法(推荐)
2016/08/02 Javascript
浅谈JavaScript 数据属性和访问器属性
2016/09/01 Javascript
Javascript中return的使用与闭包详解
2017/01/11 Javascript
Bootstrap标签页(Tab)插件使用方法
2017/03/21 Javascript
Bootstrap fileinput文件上传预览插件使用详解
2017/05/16 Javascript
浅谈ES6新增的数组方法和对象
2017/08/08 Javascript
js精确的加减乘除实例
2017/11/14 Javascript
在vue项目中使用Nprogress.js进度条的方法
2018/01/31 Javascript
关于JSON解析的实现过程解析
2019/10/08 Javascript
Vue Router中应用中间件的方法
2020/08/06 Javascript
Vue proxyTable配置多个接口地址,解决跨域的问题
2020/09/11 Javascript
Openlayers实现地图全屏显示
2020/09/28 Javascript
探究Python中isalnum()方法的使用
2015/05/18 Python
python实现应用程序在右键菜单中添加打开方式功能
2017/01/09 Python
django自带的server 让外网主机访问方法
2018/05/14 Python
Python之time模块的时间戳,时间字符串格式化与转换方法(13位时间戳)
2019/08/12 Python
python模拟键盘输入 切换键盘布局过程解析
2019/08/15 Python
用Python去除图像的黑色或白色背景实例
2019/12/12 Python
乌克兰最大的家用电器和电子产品连锁店:Eldorado
2019/10/02 全球购物
Unix如何添加新的用户
2014/08/20 面试题
挂牌仪式主持词
2014/03/20 职场文书
请假条怎么写
2014/04/10 职场文书
2014年财政局工作总结
2014/12/09 职场文书
医院病假条范文
2015/08/17 职场文书
公文写作:工伤事故分析报告怎么写?
2019/11/05 职场文书
Windows Server 2022 超融合部署(图文教程)
2022/06/25 Servers