当前位置：首页 > 资讯 > 技术文档

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

时间：2020-02-24 05:03 编辑：来源：阅读：
扫一扫，手机访问

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

本文实例讲述了jQuery实现的导航动画效果。分享给大家供大家参考，具体如下：经常在网上看到的，鼠标在导航上移动时，导航底部的横条会自动移动到鼠标悬浮的导航项上。效果如下图： [img]http://files.jb51.net/file_images/article/201604/201641100328388.png?20163110427[/img] 利用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>

完整实例代码点击此处[url=http://xiazai.jb51.net/201604/yuanma/jQuery-Nav-Move-Line-style-codes(jb51.net).rar]本站下载[/url]。更多关于jQuery相关内容感兴趣的读者可查看本站专题：《[url=http://www.1sucai.cn/Special/497.htm]jQuery拖拽特效与技巧总结[/url]》、《[url=http://www.1sucai.cn/Special/451.htm]jQuery扩展技巧总结[/url]》、《[url=http://www.1sucai.cn/Special/430.htm]jQuery常见经典特效汇总[/url]》、《[url=http://www.1sucai.cn/Special/104.htm]jQuery动画与特效用法总结[/url]》、《[url=http://www.1sucai.cn/Special/75.htm]jquery选择器用法总结[/url]》及《[url=http://www.1sucai.cn/Special/200.htm]jQuery常用插件及用法总结[/url]》希望本文所述对大家jQuery程序设计有所帮助。

全部评论(0)

上一篇：原生ajax和iframe框架实现图片文件上传的两种方式
下一篇：Android实现读写SD卡

资讯排行榜
更多>>