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 相关文章推荐
JS对select控件option选项的增删改查示例代码
Oct 21 Javascript
JavaScript编码风格指南(中文版)
Aug 26 Javascript
微信小程序开发之录音机 音频播放 动画实例 (真机可用)
Dec 08 Javascript
基于jQuery实现滚动刷新效果
Jan 09 Javascript
vue bootstrap小例子一枚
Jun 09 Javascript
vue使用drag与drop实现拖拽的示例代码
Sep 07 Javascript
使用SVG基本操作API的实例讲解
Sep 14 Javascript
JS写XSS cookie stealer来窃取密码的步骤详解
Nov 20 Javascript
关于vuejs中v-if和v-show的区别及v-show不起作用问题
Mar 26 Javascript
Vue拖拽组件列表实现动态页面配置功能
Jun 17 Javascript
微信小程序用户授权弹窗 拒绝时引导用户重新授权实现
Jul 29 Javascript
浅谈element中InfiniteScroll按需引入的一点注意事项
Jun 05 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使用标签替换的方式生成静态页面
2015/05/21 PHP
在WordPress中获取数据库字段内容和添加主题设置菜单
2016/01/11 PHP
Centos 6.5下PHP 5.3安装ffmpeg扩展的步骤详解
2017/03/02 PHP
基于jquery的让textarea自适应高度的插件
2010/08/03 Javascript
js中文逗号转英文实现
2014/02/11 Javascript
将字符串中由空格隔开的每个单词首字母大写
2014/04/06 Javascript
js实现class样式的修改、添加及删除的方法
2015/01/20 Javascript
原生js实现日期计算器功能
2017/02/17 Javascript
解决webpack打包速度慢的解决办法汇总
2017/07/06 Javascript
MVVM框架下实现分页功能示例
2018/06/14 Javascript
详解redux异步操作实践
2018/08/15 Javascript
用vue-cli开发vue时的代理设置方法
2018/09/20 Javascript
用Cordova打包Vue项目的方法步骤
2019/02/02 Javascript
layui table 多行删除(id获取)的方法
2019/09/12 Javascript
vue实现移动端input上传视频、音频
2020/08/18 Javascript
[02:43]DOTA2英雄基础教程 圣堂刺客
2013/12/09 DOTA
[01:03:59]2018DOTA2亚洲邀请赛3月30日 小组赛B组VGJ.T VS Secret
2018/03/31 DOTA
flask中主动抛出异常及统一异常处理代码示例
2018/01/18 Python
python+opencv实现阈值分割
2018/12/26 Python
对python判断是否回文数的实例详解
2019/02/08 Python
Pandas_cum累积计算和rolling滚动计算的用法详解
2019/07/04 Python
Django如何实现上传图片功能
2019/08/16 Python
python实现将两个文件夹合并至另一个文件夹(制作数据集)
2020/04/03 Python
浅析border-radius如何兼容IE
2016/04/19 HTML / CSS
英国二手iPhone、音乐、电影和游戏商店:musicMagpie
2018/10/26 全球购物
GetYourGuide台湾:预订旅游活动、景点和旅游项目
2019/06/10 全球购物
写自荐信要注意什么
2013/12/26 职场文书
室内设计专业毕业生求职信
2014/05/02 职场文书
工商管理本科生求职信
2014/07/13 职场文书
纪念九一八事变演讲稿:忘记意味着背叛
2014/09/14 职场文书
2014员工聘用协议书(最新版)
2014/11/24 职场文书
2015教师个人工作总结范文
2015/03/31 职场文书
2015重阳节座谈会主持词
2015/07/30 职场文书
爱心捐款倡议书:点燃希望,传递温暖
2019/11/04 职场文书
Golang标准库syscall详解(什么是系统调用)
2021/05/25 Golang
详解CSS玩转图片Base64编码
2021/05/25 HTML / CSS