jQuery实现的导航动画效果（附演示源码)

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

效果如下图：

利用框架的有生命的函数，很好实现。代码很简单！

代码如下：

！DOCTYPE html html head meta charset=' utf-8 '标题测试/title脚本src=' http : jquery-1。9 .1 .量滴js '/script/headdydiv class=' nav ' style=' margin : 100px auto；宽度width :960 px ' a class=' active ' href=' # '首页/aa href='# '产品/aa href='# '新闻中心/aa href='# '关于我们/aa href='# '联系我们/aa href='# '首页/aa href='# '首页/adiv class=' line '/div/div样式。nav {位置：相对；}.nav a { padd :10 px 20pxborder-bottom : solid 3px # fff；文本装饰：无；color: # 666}。nav a:hover { color: # 66f}。导航。主动的导航。活动：悬停{ color : # f33}.导航。行{ position : absoluteborder-top : solid 2px红色；宽度：0;left :0 top :0 }/style script function NavLine(o，bo){ var x='' (o.position().顶部o . ExternaL height()-2)“px”；var y=' ' o.position().左“px”；var w=' o . OUt width()' px '；var h=' 2px$('。导航。行')。stop()；if (bo) { $(' .导航。行')。css({width:w，height:h，top:x，left :y })；} else { $(' .导航。行')。动画({width:w，height:h，top:x，left :y })；}}$(function(){ navLine($(').导航. active’)、true)；$('.nav a ').hover(function(){ NavLine($(this))；}，函数(){ navLine($(').导航. active’)；});});/脚本/正文/html完整实例代码点击此处本站下载。

更多关于框架相关内容感兴趣的读者可查看本站专题： 《jQuery拖拽特效与技巧总结》 、 《jQuery扩展技巧总结》 、 《jQuery常见经典特效汇总》 、 《jQuery动画与特效用法总结》 、 《jquery选择器用法总结》 及《jQuery常用插件及用法总结》

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