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 相关文章推荐
JSDoc 介绍使用规范JsDoc的使用介绍
Feb 12 Javascript
提取jquery的ready()方法单独使用示例
Mar 25 Javascript
js实现页面跳转重定向的几种方式
May 29 Javascript
json格式的javascript对象用法分析
Jul 04 Javascript
XMLHttpRequest Level 2 使用指南
Aug 26 Javascript
easyui简介_动力节点Java学院整理
Jul 14 Javascript
layui框架中layer父子页面交互的方法分析
Nov 15 Javascript
vue引入js数字小键盘的实现代码
May 14 Javascript
vue中$set的使用(结合在实际应用中遇到的坑)
Jul 10 Javascript
JavaScript ES6常用基础知识总结
Feb 09 Javascript
微信小程序进入广告实现代码实例
Sep 19 Javascript
Vue Element plus使用方法梳理
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输出XML到页面的3种方法详解
2013/06/06 PHP
php缓存技术详细总结
2013/08/07 PHP
php实例分享之二维数组排序
2014/05/15 PHP
Yii Framework框架获取分类下面的所有子类方法
2014/06/20 PHP
php页面缓存方法小结
2015/01/10 PHP
PHP+RabbitMQ实现消息队列的完整代码
2019/03/20 PHP
PHP写API输出的时用echo的原因详解
2019/04/28 PHP
JS代码放在head和body中的区别分析
2011/12/01 Javascript
JS、CSS加载中的小问题探讨
2013/11/26 Javascript
浅析JavaScript基本类型与引用类型
2014/05/28 Javascript
JavaScript设置body高度为浏览器高度的方法
2015/02/09 Javascript
tuzhu_req.js 实现仿百度图片首页效果
2015/08/11 Javascript
jquery制作属于自己的select自定义样式
2015/11/23 Javascript
实例讲解JavaScript中的this指向错误解决方法
2016/06/13 Javascript
使用vue.js制作分页组件
2016/06/27 Javascript
JS 根据子网掩码,网关计算出所有IP地址范围示例
2020/04/23 Javascript
一个炫酷的Bootstrap导航菜单
2016/12/28 Javascript
NodeJs测试框架Mocha的安装与使用
2017/03/28 NodeJs
Vue实现路由跳转和嵌套
2017/06/20 Javascript
angularjs获取到My97DatePicker选中的值方法
2018/10/02 Javascript
vue中子组件传递数据给父组件的讲解
2019/01/27 Javascript
Element-UI中关于table表格的那些骚操作(小结)
2019/08/15 Javascript
Vue 实现CLI 3.0 + momentjs + lodash打包时优化
2019/11/13 Javascript
jquery实现垂直手风琴导航栏
2020/02/18 jQuery
[39:11]DOTA2上海特级锦标赛C组资格赛#2 LGD VS Newbee第二局
2016/02/28 DOTA
Django中的Model操作表的实现
2018/07/24 Python
python3.6实现学生信息管理系统
2019/02/21 Python
python:删除离群值操作(每一行为一类数据)
2020/06/08 Python
英国泽西岛植物:Jersey Plants Direct
2019/08/07 全球购物
2014年办公室工作总结范文
2014/11/12 职场文书
2014年扶贫帮困工作总结
2014/12/09 职场文书
导游词范文
2015/02/13 职场文书
2016年五一劳动节专题校园广播稿
2015/12/17 职场文书
详解Laravel制作API接口
2021/05/31 PHP
日本官方排名前10的动漫,名侦探柯南上榜,第一是一部创造历史的动漫
2022/03/18 日漫
Python写情书? 10行代码展示如何把情书写在她的照片里
2022/04/21 Python