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 相关文章推荐
js 目录列举函数
Nov 06 Javascript
JavaScript Cookie的读取和写入函数
Dec 08 Javascript
浅谈JavaScript编程语言的编码规范
Oct 21 Javascript
中文路径导致unitpngfix.js不正常的解决方法
Jun 26 Javascript
JavaScript对数字的判断与处理实例分析
Feb 02 Javascript
jQuery实现带玻璃流光质感的手风琴特效
Nov 20 Javascript
JS switch判断 三目运算 while 及 属性操作代码
Sep 03 Javascript
three.js 入门案例详解
Jan 23 Javascript
微信小程序icon组件使用详解
Jan 31 Javascript
基于Vuex无法观察到值变化的解决方法
Mar 01 Javascript
JavaScript使用百度ECharts插件绘制饼图操作示例
Nov 26 Javascript
JavaScript或jQuery 获取option value值方法解析
May 12 jQuery
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 session_decode函数用法讲解
2019/05/26 PHP
PHP中的输出echo、print、printf、sprintf、print_r和var_dump的示例代码
2020/12/01 PHP
Firefox getBoxObjectFor getBoundingClientRect联系
2008/10/26 Javascript
浅析JS中document对象的一些重要属性
2014/03/06 Javascript
jquery+ajax实现注册实时验证实例详解
2015/12/08 Javascript
分享两段简单的JS代码防止SQL注入
2016/04/12 Javascript
AngularJS实现给动态生成的元素绑定事件的方法
2016/12/14 Javascript
Jquery实时监听input value的实例
2017/01/26 Javascript
nodejs制作爬虫实现批量下载图片
2017/05/19 NodeJs
微信小程序仿知乎实现评论留言功能
2018/11/28 Javascript
Three.JS实现三维场景
2018/12/30 Javascript
vue elementUI 表单校验功能之数组多层嵌套
2019/06/04 Javascript
小程序接口的promise化的实现方法
2019/12/11 Javascript
单线程JavaScript实现异步过程详解
2020/05/19 Javascript
layui实现显示数据表格、搜索和修改功能示例
2020/06/03 Javascript
[52:20]VP vs VG Supermajor小组赛 B组胜者组决赛 BO3 第一场 6.2
2018/06/03 DOTA
[01:05:36]VP vs TNC Supermajor小组赛B组 BO3 第二场 6.2
2018/06/03 DOTA
python交互式图形编程实例(二)
2017/11/17 Python
对python中list的拷贝与numpy的array的拷贝详解
2019/01/29 Python
一篇文章弄懂Python中所有数组数据类型
2019/06/23 Python
wxPython实现文本框基础组件
2019/11/18 Python
python装饰器代替set get方法实例
2019/12/19 Python
HTML5之语义标签介绍
2016/07/07 HTML / CSS
日本土著品牌,综合型购物网站:Cecile
2016/08/23 全球购物
Mankind西班牙男士护肤品网站:购买皮肤护理、护发和剃须
2017/04/27 全球购物
金讯Java笔试题目
2013/06/18 面试题
高中军训感想300字
2014/03/04 职场文书
给市场的环保建议书
2014/05/14 职场文书
争先创优心得体会
2014/09/12 职场文书
车辆年检委托书范本
2014/10/14 职场文书
检讨书大全
2015/01/27 职场文书
交通事故被告代理词
2015/05/23 职场文书
家长对孩子的寒假评语
2015/10/09 职场文书
详解Python牛顿插值法
2021/05/11 Python
JavaScript 定时器详情
2021/11/11 Javascript
教你在 Java 中实现 Dijkstra 最短路算法的方法
2022/04/08 Java/Android