jQuery实现的导航动画效果(附demo源码)


Posted in Javascript onApril 01, 2016

本文实例讲述了jQuery实现的导航动画效果。分享给大家供大家参考,具体如下:
经常在网上看到的,鼠标在导航上移动时,导航底部的横条会自动移动到鼠标悬浮的导航项上。

效果如下图:

jQuery实现的导航动画效果(附demo源码)

利用jquery的 animate 函数,很好实现。代码很简单!

代码如下:

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>测试</title>
 <script src="jquery-1.9.1.min.js"></script>
</head>
<body>
<div class="nav" style="margin: 100px auto; width:960px;">
<a class="active" href="#">首页</a>
<a href="#">产品</a>
<a href="#">新闻中心</a>
<a href="#">关于我们</a>
<a href="#">联系我们</a>
<a href="#">首页</a>
<a href="#">首页</a>
<div class="line"></div>
</div>
<style>
.nav{
 position:relative;
}
.nav a{
 padding:10px 20px;
 border-bottom:solid 3px #fff;
 text-decoration: none;
 color:#666;
}
.nav a:hover{
 color:#66f;
}
.nav .active, .nav .active:hover{
 color:#f33;
}
.nav .line{
 position:absolute;
 border-top:solid 2px red;
 width:0;
 left:0;
 top:0;
}
</style>
<script>
function navLine(o, bo)
{
 var x = '' + (o.position().top + o.outerHeight() - 2) + 'px';
 var y = '' + o.position().left + 'px';
 var w = '' + o.outerWidth() + 'px';
 var h = '2px';
 $('.nav .line').stop();
 if (bo)
 {
  $('.nav .line').css({width:w, height:h, top:x, left:y});
 }
 else
 {
  $('.nav .line').animate({width:w, height:h, top:x, left:y});
 }
}
$(function(){
 navLine($('.nav .active'), true);
 $('.nav a').hover(function(){
  navLine($(this));
 }, function(){
  navLine($('.nav .active'));
 });
});
</script>
</body>
</html>

完整实例代码点击此处本站下载。

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

Javascript 相关文章推荐
关于Jquery操作Cookie取值错误的解决方法
Aug 26 Javascript
调试JavaScript中正则表达式中遇到的问题
Jan 27 Javascript
C++中的string类的用法小结
Aug 07 Javascript
DOM事件阶段以及事件捕获与事件冒泡先后执行顺序(图文详解)
Aug 18 Javascript
JavaScript File API文件上传预览
Feb 02 Javascript
防止Node.js中错误导致进程阻塞的办法
Aug 11 Javascript
javascript中href和replace的比较(详解)
Nov 25 Javascript
巧用canvas
Jan 21 Javascript
Angularjs 动态添加指令并绑定事件的方法
Apr 13 Javascript
Js实现中国公民身份证号码有效性验证实例代码
May 03 Javascript
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
Apr 17 jQuery
JS实现悬浮球只在一侧滑动并且是横屏状态下
Aug 19 Javascript
JS中frameset框架弹出层实例代码
Apr 01 #Javascript
JS操作COOKIE实现备忘记录的方法
Apr 01 #Javascript
Atitit.js的键盘按键事件捆绑and事件调度
Apr 01 #Javascript
JS中多步骤多分步的StepJump组件实例详解
Apr 01 #Javascript
js+flash实现的5图变换效果广告代码(附演示与demo源码下载)
Apr 01 #Javascript
js中字符串编码函数escape()、encodeURI()、encodeURIComponent()区别详解
Apr 01 #Javascript
基于jquery实现轮播焦点图插件
Mar 31 #Javascript
You might like
PHP学习之PHP变量
2006/10/09 PHP
php array_merge下进行数组合并的代码
2008/07/22 PHP
php命令行(cli)模式下报require 加载路径错误的解决方法
2015/11/23 PHP
PHP的AES加密算法完整实例
2016/07/20 PHP
启用OPCache提高PHP程序性能的方法
2019/03/21 PHP
thinkphp5框架扩展redis类方法示例
2019/05/06 PHP
理解 JavaScript 预解析
2009/10/25 Javascript
JavaScript实现多维数组的方法
2013/11/20 Javascript
js跳转页面方法总结
2014/01/29 Javascript
jQuery构造函数init参数分析
2015/05/13 Javascript
JavaScript的面向对象编程基础
2015/08/13 Javascript
javascript判断复选框是否选中的方法
2015/10/16 Javascript
JavaScript匿名函数之模仿块级作用域
2015/12/12 Javascript
理解Javascript文件动态加载
2016/01/29 Javascript
jQuery实现邮箱下拉列表自动补全功能
2016/09/08 Javascript
js实现导航吸顶效果
2017/02/24 Javascript
实现div滚动条默认最底部以及默认最右边的示例代码
2017/11/15 Javascript
微信小程序 MinUI组件库系列之badge徽章组件示例
2018/08/20 Javascript
vue debug 二种方法
2018/09/16 Javascript
创建Vue项目以及引入Iview的方法示例
2018/12/03 Javascript
9种方法优化jQuery代码详解
2020/02/04 jQuery
封装 axios+promise通用请求函数操作
2020/08/11 Javascript
jQuery实现tab栏切换效果
2020/12/22 jQuery
分析python动态规划的递归、非递归实现
2018/03/04 Python
解决pyinstaller打包pyqt5的问题
2019/01/08 Python
django框架面向对象ORM模型继承用法实例分析
2019/07/29 Python
Python print不能立即打印的解决方式
2020/02/19 Python
Selenium webdriver添加cookie实现过程详解
2020/08/12 Python
气象学专业个人求职信
2014/04/22 职场文书
触电现场处置方案
2014/05/14 职场文书
个人租房协议书样本
2014/10/01 职场文书
停车场管理协议书范本
2014/10/08 职场文书
领导干部作风建设自查报告
2014/10/23 职场文书
2015商场元旦促销活动策划方案
2014/12/09 职场文书
2015年统计员个人工作总结
2015/07/23 职场文书
Pytorch中使用ImageFolder读取数据集时忽略特定文件
2022/03/23 Python