jQuery实现背景弹性滚动的导航效果


Posted in Javascript onJune 01, 2016

本文实例讲述了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>背景弹性滚动的导航效果</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312" />
<!--把下面代码加到<head>与</head>之间-->
<style type="text/css">
.nav-wrap {
margin: 0 auto;
background-color: #121212;
border-top: 1px solid #FFF;
border-bottom: 1px solid #FFF;
}
.group:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
*:first-child+html .group { /* IE7 */
zoom: 1;
}
#example {
width: 960px;
margin: 0 auto;
list-style: none;
position: relative;
}
#example li {
display: inline;
}
#example li a {
position: relative;
z-index: 200;
color: #AAA;
font-size: 14px;
display: block;
float: left;
padding: 12px 10px 10px 10px;
text-decoration: none;
text-transform: uppercase;
}
#example li a:hover {
color: #FFF;
}
#example #magic-line-two {
width: 100px;
position: absolute;
top: 0;
left: 0;
background: #666;
z-index: 100;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.current a {
color: #FFF !important;
}
</style>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var $el, leftPos, newWidth,
$mainNav = $("#example");
/*
EXAMPLE
*/
$mainNav.append("<li id='magic-line-two'></li>");
var $magicLineTwo = $("#magic-line-two");
$magicLineTwo
.width($(".current").width())
.height($mainNav.height())
.css("left", $(".current a").position().left)
.data("origLeft", $(".current a").position().left)
.data("origWidth", $magicLineTwo.width())
.data("origColor", $(".current a").attr("rel"));
$("#example li").find("a").hover(function() {
$el = $(this);
leftPos = $el.position().left;
newWidth = $el.parent().width();
$magicLineTwo.stop().animate({
left: leftPos,
width: newWidth,
backgroundColor: $el.attr("rel")
})
}, function() {
$magicLineTwo.stop().animate({
left: $magicLineTwo.data("origLeft"),
width: $magicLineTwo.data("origWidth"),
backgroundColor: $magicLineTwo.data("origColor")
});
});
});
</script>
</head>
<body>
预览效果时左下角会提示错误,而且看不到效果,刷新一下就可以看到效果了;当然,在实际使用中,不会出现这样的问题。<br>
<!--把下面代码加到<body>与</body>之间-->
<div class="nav-wrap">
<ul class="group" id="example">
<li class="current"><a href="#" _fcksavedurl="#">Home</a></li>
<li><a href="#" _fcksavedurl="#">About me</a></li>
<li><a href="#" _fcksavedurl="#">Our Team</a></li>
<li><a href="#" _fcksavedurl="#">Portfolio</a></li>
<li><a href="#" _fcksavedurl="#">The Show</a></li>
<li><a href="#" _fcksavedurl="#">Videos</a></li>
<li><a href="#" _fcksavedurl="#">CSS/HTML</a></li>
<li><a href="#" _fcksavedurl="#">jQuery</a></li>
<li><a href="#" _fcksavedurl="#">Navigation</a></li>
<li><a href="#" _fcksavedurl="#">Wordpress</a></li>
<li><a href="#" _fcksavedurl="#">Contact</a></li>
</ul>
</div>
</body>
</html>

PS:这里再为大家推荐几款代码格式化、美化工具,相信大家在以后的开发过程中会用得到:

在线JavaScript代码美化、格式化工具:
http://tools.3water.com/code/js

JavaScript压缩/格式化/加密工具:
http://tools.3water.com/code/jscompress

XML代码在线格式化美化工具:
http://tools.3water.com/code/xmlcodeformat

json代码在线格式化/美化/压缩/编辑/转换工具:
http://tools.3water.com/code/jsoncodeformat

在线JSON代码检验、检验、美化、格式化工具:
http://tools.3water.com/code/json

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
jQuery 判断页面元素是否存在的代码
Aug 14 Javascript
对于this和$(this)的个人理解
Sep 08 Javascript
Textarea根据内容自适应高度
Oct 28 Javascript
JS中实现函数return多个返回值的实例
Feb 21 Javascript
JavaScript实现图片拖曳效果
Sep 08 Javascript
通过fastclick源码分析彻底解决tap“点透”
Dec 24 Javascript
解决vue-router进行build无法正常显示路由页面的问题
Mar 06 Javascript
Angularjs Promise实例详解
Mar 15 Javascript
JS实现transform实现扇子效果
Jan 17 Javascript
javascript设计模式 ? 职责链模式原理与用法实例分析
Apr 16 Javascript
Vue 请求传公共参数的操作
Jul 31 Javascript
vue项目中openlayers绘制行政区划
Dec 24 Vue.js
jQuery Chart图表制作组件Highcharts用法详解
Jun 01 #Javascript
有关jQuery中parent()和siblings()的小问题
Jun 01 #Javascript
深入理解ECMAScript的几个关键语句
Jun 01 #Javascript
星期几的不同脚本写法(推荐)
Jun 01 #Javascript
js获取当前年月日-YYYYmmDD格式的实现代码
Jun 01 #Javascript
jquery 将当前时间转换成yyyymmdd格式的实现方法
Jun 01 #Javascript
底部悬浮通栏可以关闭广告位的实现方法
Jun 01 #Javascript
You might like
PHP 二维数组根据某个字段排序的具体实现
2014/06/03 PHP
php面象对象数据库操作类实例
2014/12/02 PHP
Yii2框架使用计划任务的方法
2016/05/25 PHP
js调试系列 断点与动态调试[基础篇]
2014/06/18 Javascript
javascript面向对象之this关键词用法分析
2015/01/13 Javascript
JavaScript将Web页面内容导出到Word及Excel的方法
2015/02/13 Javascript
jquery动态创建div与input的实例代码
2016/10/12 Javascript
Bootstrap Modal遮罩弹出层代码分享
2016/11/21 Javascript
原生js实现图片放大缩小计时器效果
2017/01/20 Javascript
jQuery实现大图轮播
2017/02/13 Javascript
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
2017/08/01 jQuery
详解react使用react-bootstrap当轮子造车
2017/08/15 Javascript
JavaScript数组的5种迭代方法
2017/09/29 Javascript
Vue实现数字输入框中分割手机号码的示例
2017/10/10 Javascript
Koa代理Http请求的示例代码
2018/10/10 Javascript
如何使用 vue + d3 画一棵树
2018/12/03 Javascript
Node.js动手撸一个静态资源服务器的方法
2019/03/09 Javascript
vue 实现搜索的结果页面支持全选与取消全选功能
2019/05/10 Javascript
layui多iframe页面控制定时器运行的方法
2019/09/05 Javascript
[01:29:46]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第二局
2016/02/27 DOTA
[01:16:01]VGJ.S vs Mski Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
pygame游戏之旅 游戏中添加显示文字
2018/11/20 Python
Python列表切片操作实例总结
2019/02/19 Python
用vue.js组件模拟v-model指令实例方法
2019/07/05 Python
python 实现Flask中返回图片流给前端展示
2020/01/09 Python
Python实现实时数据采集新型冠状病毒数据实例
2020/02/04 Python
六月份红领巾广播稿
2014/02/03 职场文书
家长评语和期望
2014/02/10 职场文书
中学生学雷锋活动心得体会
2014/03/10 职场文书
《飞向蓝天的恐龙》教学反思
2014/04/09 职场文书
公证书标准格式
2014/04/10 职场文书
班长竞选演讲稿
2014/04/24 职场文书
股权转让协议书
2014/12/07 职场文书
2015年学校安全管理工作总结
2015/05/11 职场文书
前端vue+express实现文件的上传下载示例
2022/02/18 Vue.js
Python 操作pdf pdfplumber读取PDF写入Exce
2022/08/14 Python