JavaScript,封装库--滑动导航

效果图

html

<!--滑动导航-->
<div id="nav">
<ul class="about">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul class="black">
<li>首页</li>
<li>博文列表</li>
<li>精彩相册</li>
<li>动感音乐</li>
<li>关于我</li>
</ul>
<div class="nav_bg">
<ul class="white">
<li>首页</li>
<li>博文列表</li>
<li>精彩相册</li>
<li>动感音乐</li>
<li>关于我</li>
</ul>
</div>
</div>

css

/*滑动导航*/
#nav {
width:465px;
height:52px;
background:url(img/nav_bg.png) no-repeat;
margin:50px auto 0 auto;
position:relative;
}
#nav ul {
position:absolute;
}
#nav ul li {
width:85px;
height:52px;
line-height:52px;
text-align:center;
font-weight:bold;
float:left;
}
#nav ul.black {
left:20px;
color:#333;
z-index:;
}
#nav ul.white {
width:425px;
color:#fff;
z-index:;
left:;
}
#nav ul.about {
z-index:;
left:20px;
cursor:pointer;
background:red;
filter:alpha(opacity=0);
opacity:;
}
#nav div.nav_bg {
width:85px;
height:52px;
background:url(img/nav_over.png) no-repeat 0 11px;
position:absolute;
left:20px;
top:0px;
z-index:;
overflow:hidden;
}

前台js

//滑动导航
$('#nav .about li').shu_biao_yi_ru_yi_chu(function () {
var target = $(this).sh_jd().offsetLeft;
$('#nav .nav_bg').yi_dong_tou_ming({
attr : 'x',
target : target + 20,
t : 30,
step : 10,
fn : function () {
$('#nav .white').yi_dong_tou_ming({
attr : 'x',
target : -target
});
}
});
}, function () {
$('#nav .nav_bg').yi_dong_tou_ming({
attr : 'x',
target : 20,
t : 30,
step : 10,
fn : function () {
$('#nav .white').yi_dong_tou_ming({
attr : 'x',
target : 0
});
}
});
});

首先引入js函数库文件,和封装库文件

第一百四十七节,封装库--JavaScript,滑动导航的更多相关文章

  1. 第一百五十七节,封装库--JavaScript,预加载图片

    封装库--JavaScript,预加载图片 首先了解一个Image对象,为图片对象 Image对象 var temp_img = new Image();   //创建一个临时区域的图片对象alert ...

  2. 第一百四十九节,封装库--JavaScript,表单验证--验证用户名

    封装库--JavaScript,表单验证--验证用户名 注册验证功能,顾名思义就是验证表单中每个字段的合法性,如果全部合法才可以提交表单. 效果图 聚集光标时 信息不合法是 信息合法时 html &l ...

  3. 第一百四十八节,封装库--JavaScript,菜单切换

    第一百四十八节,封装库--JavaScript,菜单切换 首先在封装库封装点击切换方法 /** dian_ji_qie_huan()方法,设置点击切换,将元素设置成点击切换,也就是点击目标元素后,循环 ...

  4. 第一百六十一节,封装库--JavaScript,完整封装库文件

    封装库--JavaScript,完整封装库文件 /** *feng_zhuang_ku_1.0版本,js封装库,2016/12/29日:林贵秀 **/ /** 前台调用 * 每次调用$()创建库对象, ...

  5. 第一百五十五节,封装库--JavaScript,轮播器

    封装库--JavaScript,轮播器 html <div id="banner"> <img src="img/banner1.jpg" a ...

  6. 第一百五十四节,封装库--JavaScript,表单验证--提交验证

    封装库--JavaScript,表单验证--提交验证 将表单的所有必填项,做一个判断函数,填写正确时返回布尔值 最后在提交时,判断每一项是否正确,全部正确才可以 提交 html <div id= ...

  7. 第一百五十节,封装库--JavaScript,表单验证--密码验证

    封装库--JavaScript,表单验证--密码验证 效果图 html <div id="reg"> <h2 class="tuo">& ...

  8. 第一百六十节,封装库--JavaScript,ajax注册表单到数据库

    封装库--JavaScript,ajax注册表单到数据库 效果图 前台js var biaodan = $().xu_lie_biao_dan($('form').sh_jd()); //序列化获取表 ...

  9. 第一百五十九节,封装库--JavaScript,表单序列化结合ajax提交数据

    封装库--JavaScript,表单序列化结合ajax提交数据 封装库,表单序列化方法 /** xu_lie_biao_dan()方法,表单序列化方法,将自动获取指定表单里面的各项字段name值和va ...

随机推荐

  1. javascript设置首页,加入收藏

    <a href="javascript:;" id="setHomePage" class="toolsbar" onclick=&q ...

  2. Python代码可视化

    把以下代码贴到这个网站: http://www.pythontutor.com l1 = [3, [66, 55, 44], (7, 8, 9)] l2 = list(l1) l1.append(10 ...

  3. sip

    INVITE sip:10010101402@10.7.36.70:5060 SIP/2.0 Via: SIP/2.0/UDP 10.7.36.250:5060;rport;branch=z9hG4b ...

  4. JMeter 十:录制脚本--使用bodboy

    1. 下载bodboy 下载地址:http://www.badboy.com.au/download 这里填写完基本信息,点击下方的Continue即可跳转到下载页面. 任选一个version,点击后 ...

  5. 算法笔记_073:哈密顿回路问题(Java)

    目录 1 问题描述 2 解决方案   1 问题描述 什么是哈密顿回路? 引用自百度百科: 哈密顿图(哈密尔顿图)(英语:Hamiltonian path,或Traceable path)是一个无向图, ...

  6. bin和sbin区别

    据说这个目录结构是沿袭unix的,不大清楚. bin是binary的缩写,是可执行的二进制文件./bin里面一般是基本的,大家都要用的工具:sbin里面的s是system的意思,是供system ad ...

  7. 开机自启动:从busybox到debian

    需要在mint上设置opensips的开机自启动,翻了半天资料还是一知半解.最后在opensips的官方文档,查到用下面的语句,添加自启动成功.不过貌似还是会有启动不成功,没有仔细测试过. updat ...

  8. AngularJS模块具体解释

    模块是提供一些特殊服务的功能块.比方本地化模块负责文字本地化,验证模块负责数据验证.一般来说,服务在模块内部,当我们须要某个服务的时候,是先把模块实例化.然后再调用模块的方法. 但Angular模块和 ...

  9. Docker技术-cgroup

    分类: 虚拟化 Docker容器采用了linux内核中的cgroup技术来实现container的资源的隔离和控制. 关于cgroup我们需要了解的它的知识点: 1. 基本概念 cgroup涉及到几个 ...

  10. CentOS 安装jdk1.7 32位

    CentOS 安装jdk1.7 32位 1.下载jdk-7u21-linux-i586.rpm ? 1 wget http://uni-smr.ac.ru/archive/dev/java/bulk/ ...