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 相关文章推荐
ExtJs中简单的登录界面制作方法
Aug 19 Javascript
JavaScript类和继承 prototype属性
Sep 03 Javascript
通过DOM脚本去设置样式信息
Sep 19 Javascript
ASP.NET jQuery 实例6 (实现CheckBoxList成员全选或全取消)
Jan 13 Javascript
一个支付页面DEMO附截图
Jul 22 Javascript
基于jQuery实现拖拽图标到回收站并删除功能
Nov 25 Javascript
BootStrap注意事项小结(五)表单
Mar 10 Javascript
js获取文件里面的所有文件名(实例)
Oct 17 Javascript
解决option标签selected=&quot;selected&quot;属性失效的问题
Nov 06 Javascript
JQuery选中select组件被选中的值方法
Mar 08 jQuery
详解vue中的父子传值双向绑定及数据更新问题
Jun 13 Javascript
解决Vue-Router升级导致的Uncaught (in promise)问题
Aug 07 Javascript
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程序时遇到的三个问题
2012/01/17 PHP
PHP include任意文件或URL介绍
2014/04/29 PHP
PHP使用memcache缓存技术提高响应速度的方法
2014/12/26 PHP
PHP框架Laravel的小技巧两则
2015/02/10 PHP
PHP实现补齐关闭的HTML标签
2016/03/22 PHP
详解PHP如何更好的利用PHPstorm的自动提示
2017/08/18 PHP
Tab切换组件(选项卡功能)实例代码
2013/11/21 Javascript
jQuery实现多按钮单击变色
2014/11/27 Javascript
常用的Javascript设计模式小结
2015/12/09 Javascript
jQuery筛选数组之grep、each、inArray、map的用法及遍历json对象
2016/06/20 Javascript
Node.js connect ECONNREFUSED错误解决办法
2016/09/15 Javascript
JavaScript之iterable_动力节点Java学院整理
2017/06/29 Javascript
Angular2 http jsonp的实例详解
2017/08/31 Javascript
10行原生JS实现文字无缝滚动(超简单)
2018/01/02 Javascript
使用vue + less 实现简单换肤功能的示例
2018/02/21 Javascript
简述JS浏览器的三种弹窗
2018/07/15 Javascript
vue项目中引入vue-datepicker插件的详解
2019/05/14 Javascript
js 使用ajax设置和获取自定义header信息的方法小结
2020/03/12 Javascript
Python使用scrapy抓取网站sitemap信息的方法
2015/04/08 Python
Python、PyCharm安装及使用方法(Mac版)详解
2017/04/28 Python
python json.loads兼容单引号数据的方法
2018/12/19 Python
python使用装饰器作日志处理的方法
2019/07/11 Python
使用Python第三方库pygame写个贪吃蛇小游戏
2020/03/06 Python
Python3 hashlib密码散列算法原理详解
2020/03/30 Python
python将下载到本地m3u8视频合成MP4的代码详解
2020/11/24 Python
python UDF 实现对csv批量md5加密操作
2021/01/01 Python
Scholastic父母商店:儿童书籍
2017/01/01 全球购物
Skyscanner台湾:全球知名的旅行比价引擎
2018/07/01 全球购物
Bose美国官网:购买Bose耳机和音箱
2019/03/10 全球购物
C#如何允许一个类被继承但是避免这个类的方法被重载?
2015/02/24 面试题
后备干部考察材料
2014/02/12 职场文书
写求职信要注意什么问题
2014/04/12 职场文书
自主招生推荐信格式模板
2015/03/24 职场文书
新课程改革心得体会
2016/01/22 职场文书
python 用递归实现通用爬虫解析器
2021/04/16 Python
MySql 缓存查询原理与缓存监控和索引监控介绍
2021/07/02 MySQL