脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → jQuery导航动画效果

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

 更新时间：2016年04月01日 10:01:43   作者：xiao张  
这篇文章主要介绍了jQuery实现的导航动画效果,可实现导航条的底部横条随鼠标移动的效果,涉及jQuery针对鼠标事件的响应及页面元素样式动态变换的相关技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下

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

效果如下图：

利用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相关内容感兴趣的读者可查看本站专题：《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》

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

您可能感兴趣的文章:

相关文章

  • jQuery select的操作实现代码

    jQuery select的操作实现代码

    jQuery對select的操作的实际应用代码。方便大家学习jquery
    2009-05-05
  • jquery实现多级下拉菜单的实例代码

    jquery实现多级下拉菜单的实例代码

    多级菜单，理论上支持无限多的层级，文件结构非常简单的，以下是完整代码，有需要的朋友可以参考一下
    2013-10-10
  • EasyUI Datebox 日期验证之开始日期小于结束时间

    EasyUI Datebox 日期验证之开始日期小于结束时间

    这篇文章主要介绍了EasyUI Datebox 日期验证之开始日期小于结束时间,需要的朋友可以参考下
    2017-05-05
  • jQuery实现鼠标滑动切换图片

    jQuery实现鼠标滑动切换图片

    这篇文章主要为大家详细介绍了jQuery实现鼠标滑动切换图片，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-05-05
  • Jquery性能优化详解

    Jquery性能优化详解

    寻寻觅觅，觅觅寻寻终于找到了一些关于jquery性能优化的文章，果断收藏当然不能忘了加上自己的一些总结及理解。
    2014-05-05
  • jQuery实现简单弹幕效果

    jQuery实现简单弹幕效果

    这篇文章主要为大家详细介绍了jQuery实现简单弹幕效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-11-11
  • jquery操作select取值赋值与设置选中实例

    jquery操作select取值赋值与设置选中实例

    下面小编就为大家带来一篇jquery操作select取值赋值与设置选中实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-02-02
  • jQuery插件bgStretcher.js实现全屏背景特效

    jQuery插件bgStretcher.js实现全屏背景特效

    可以自动动态更换网页背景图片的jQuery插件bgstretcher.js，sharejs.com推荐的这个插件，可以自定义多种方式让网页背景自动切换，效果流畅，非常难得，调用代码也非常简单。
    2015-06-06
  • jQuery实现的自适应焦点图效果完整实例

    jQuery实现的自适应焦点图效果完整实例

    这篇文章主要介绍了jQuery实现的自适应焦点图效果,结合完整实例形式分析了jQuery事件响应及动态操作页面元素属性的相关技巧,需要的朋友可以参考下
    2016-08-08
  • layui表格实现代码

    layui表格实现代码

    这篇文章主要为大家详细介绍了layui表格效果的实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-05-05

最新评论