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 相关文章推荐
JavaScript 更严格的相等 [译]
Sep 20 Javascript
JQuery中操作Css样式的方法
Feb 12 Javascript
JavaScript动态加载样式表的方法
Mar 21 Javascript
浅谈利用JavaScript进行的DDoS攻击原理与防御
Jun 04 Javascript
js漂浮广告实现代码
Aug 15 Javascript
Immutable 在 JavaScript 中的应用
May 02 Javascript
浅谈JQuery+ajax+jsonp 跨域访问
Jun 25 Javascript
javascript 显示全局变量与隐式全局变量的区别
Feb 09 Javascript
javascript实现非常简单的小数取整功能示例
Jun 13 Javascript
基于jQuery选择器之表单对象属性筛选选择器的实例
Sep 19 jQuery
JavaScript实现简单轮播图效果
Dec 01 Javascript
vue项目中使用vue-layer弹框插件的方法
Mar 11 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批量删除jQuery操作
2017/07/23 PHP
jQuery对象[0]是什么含义?
2010/07/31 Javascript
javascript 基础篇1 什么是js 建立第一个js程序
2012/03/14 Javascript
打开新窗口关闭当前页面不弹出关闭提示js代码
2013/03/18 Javascript
浅析IE10兼容性问题(frameset的cols属性)
2014/01/03 Javascript
随鼠标移动的时钟非常漂亮遗憾的是只支持IE
2014/08/12 Javascript
JavaScript中的单引号和双引号报错的解决方法
2014/09/01 Javascript
javascript正则表达式使用replace()替换手机号的方法
2015/01/19 Javascript
判断访客终端类型集锦
2015/06/05 Javascript
谈谈JavaScript中function多重理解
2015/08/28 Javascript
javascript中的previousSibling和nextSibling的正确用法
2015/09/16 Javascript
JS实现网页每隔3秒弹出一次对话框的方法
2015/11/09 Javascript
解决WordPress使用CDN后博文无法评论的错误
2015/12/15 Javascript
利用Javascript仿Excel的数据透视分析功能
2016/09/07 Javascript
jQuery  ready方法实现原理详解
2016/10/19 Javascript
jquery实时获取时间的简单实例
2017/01/26 Javascript
Vue中v-show添加表达式的问题(判断是否显示)
2018/03/26 Javascript
基于node搭建服务器,写接口,调接口,跨域的实例
2018/05/13 Javascript
使用Vue.js 和Chart.js制作绚丽多彩的图表
2019/06/15 Javascript
JavaScript获取页面元素的常用方法详解
2019/09/28 Javascript
如何将Node.js中的回调转换为Promise
2020/11/10 Javascript
[00:17]DOTA2荣耀之路5:It’s a disastah!
2018/05/28 DOTA
Django 浅谈根据配置生成SQL语句的问题
2018/05/29 Python
python生成ppt的方法
2018/06/07 Python
使用python判断你是青少年还是老年人
2018/11/29 Python
python爬虫 线程池创建并获取文件代码实例
2019/09/28 Python
python爬虫开发之PyQuery模块详细使用方法与实例全解
2020/03/09 Python
10个python3常用排序算法详细说明与实例(快速排序,冒泡排序,桶排序,基数排序,堆排序,希尔排序,归并排序,计数排序)
2020/03/17 Python
django API 中接口的互相调用实例
2020/04/01 Python
Keras使用ImageNet上预训练的模型方式
2020/05/23 Python
浅谈Python 钉钉报警必备知识系统讲解
2020/08/17 Python
澳大利亚免息网上购物:Shop Zero
2016/09/17 全球购物
Sephora丝芙兰澳洲官方网站:国际知名化妆品购物
2016/10/27 全球购物
为数据库创建索引都需要注意些什么
2012/07/17 面试题
乡镇领导班子批评与自我批评材料
2014/09/23 职场文书
2014年酒店工作总结与计划
2014/11/17 职场文书