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

1、jQuery实现的导航动画效果(附demo源码)_ 这篇文章主要介绍了jQuery实现的导航动画效果,可实现导航条的底部横条随鼠标移动的效果,涉及jQuery针对鼠标大事的响应及页面元素样式动态变换的相关技巧,并附带demo源码供读者下载参考,需要的伴侣可以参考下 本文实例讲解并描述了jQuery实现的导航动画效果。分享给大家供大家参考，具体如下： 常常在网上看到的，鼠标在导航上移动时，导航底部的横条会自动移动到鼠标悬浮的导航项上。 效果如下图： 利用jquery的 animate 函数，很好实现。代码很简洁！ 代码如下: !DOCTYPE html html head meta charse

2、t=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 paddi

3、ng: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.o

4、uterHeight() - 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);