经常在网上看到的，鼠标在导航上移动时，导航底部的横条会自动移动到鼠标悬浮的导航项上。

效果如下图：

利用jquery的 animate 函数，很好实现。代码很简单！

代码如下：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>测试</title>

    <script src="http://libs.useso.com/js/jquery/1.9.1/jquery.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>

下载地址：http://files.cnblogs.com/files/zjfree/jsNavMove.rar

jquery导航动画的更多相关文章

  1. 精选7款绚丽的HTML5和jQuery图片动画特效

    在HTML5出现后,图片就变得更加富有动感了,各种图片动画特效也层出不穷,例如图片播放器.图片导航.3D图片动画等等.本文将精选几款具有代表性的HTML5和jQuery图片动画特效,绚丽的画面.实用的 ...

  2. 10个非常炫酷的jQuery相册动画赏析

    我们经常可以在网页上看到形式各异的jQuery相册插件,由于现在浏览器对HTML5和CSS3的兼容越来越好了,所以很多jQuery相册插件都运用了CSS3的相关特性,形成了许多炫酷的动画特效.本文收集 ...

  3. jQuery导航插件One-Page-Nav演示-显示命名锚记

    jQuery导航插件One-Page-Nav演示-显示命名锚记 简介 使用 选项 示例 推荐 简介 电商网站的分类比较明确,比如1楼是手机通讯产品,2楼是家用电器,3楼是服装鞋包等等,旁边还会有一个固 ...

  4. jquery animate 动画效果使用解析

    animate的意思是:使有生气:驱动:使栩栩如生地动作:赋予…以生命作为形容词:有生命的:活的:有生气的:生气勃勃的 先看动画效果:http://keleyi.com/keleyi/phtml/jq ...

  5. jQuery的动画处理总结

    最近一年多一直在做前端的东西,由于老板在追求一些年轻动感的效果,让页面元素不能仅仅是简单的隐藏显示,所以经常会使用一些动画效果,发现jQuery的动画真心好用啊,把常用的几个总结一下,希望不再每次使用 ...

  6. Smint – 用于单页网站制作的 jQuery 导航菜单插件

    Smint 是一款用于实现单页风格网站的 jQuery 导航插件,包含两部分:固定在页面顶部的精美导航条和能够在你点击的时候自动滚动到对应内容的菜单按钮.Smint 使用非常简单,只有一个参数用于设置 ...

  7. jQuery实现动画过程中尽量避免出现网页滚动条

    jQuery实现动画过程中尽量避免出现网页滚动条,不然可能会出现动画效果异常.

  8. jQuery Easing动画效果扩展（转）

    jQuery API提供了简单的动画效果如淡入淡出以及自定义动画效果,而今天我给大家分享的是一款jQuery动画效果扩展增强插件jquery.easing.js,使用该插件可以实现直线匀速运功.变加速 ...

  9. jQuery 停止动画、jQuery Callback 函数、jQuery - Chaining

    一.jQuery 停止动画 jQuery stop() 方法用于在动画或效果完成前对它们进行停止. stop() 方法适用于所有 jQuery 效果函数,包括滑动.淡入淡出和自定义动画. $(sele ...

随机推荐

  1. Eclipse 插件安装方法和插件加载失败解决办法

    一:是利用Eclipse Software  Update 添加网址,让Eclipse 自动的搜索下载最新的插件. 比如安装VE这个可视化编辑UI的插件,其步骤为 Help > Software ...

  2. 矩阵基本运算的 Python 实现

    from...import与import区别在于import直接导入指定的库,而from....import则是从指定的库中导入指定的模块 import...as则是将import A as B,给予 ...

  3. 关于java“配置环境变量”的那些事

    我们刚开始学习java,都会面临编程路上的第一个小怪兽:配环境变量. 网上很多教程给了我们很多的参考,但我们是否有想过为什么要这么配呢?下面我就是想重点探讨一下为什么?并且希望以后你们不但能配,还知道 ...

  4. List,set,Map 的用法和区别

    Collection├List│├LinkedList│├ArrayList│└Vector│ └Stack└SetMap├Hashtable├HashMap└WeakHashMap Collecti ...

  5. spark sql 访问hive数据时找不mysql的解决方法

    我尝试着在classpath中加n入mysql的驱动仍不行 解决方法:在启动的时候加入参数--driver-class中加入mysql 驱动 [hadoop@master spark-1.0.1-bi ...

  6. linux之pid文件

    在命令行中经常看到*.pid文件 其实这些文件是在启动进程的时候系统给这个进程的master进程分配的进程号 比如/usr/local/nginx/logs/nginx.pid文件 打开这个文件会发现 ...

  7. UVA10305 拓扑序

    题意:给出多个任务,以及一系列任务的关系表示某个任务必须在某个任务前完成,问一个合理的任务完成顺序 拓扑序的裸题,一开始用大白书的写法,后来发现并不好用,就换了BFS又A了一遍. 原: #includ ...

  8. poj2492 带权并查集

    题意:研究一种生物,有n个生物个体,发现有一些之间进行了交配,给出了这些关系,问是否有同性恋的bug出现. 用0\1表示某元素和其祖先元素的性别关系,0 为相同,1 为不同,用 mod2 实现累计处理 ...

  9. 黑马程序员——JAVA基础之JDK1.5新特性高级for循环和可变参数

    ------- android培训.java培训.期待与您交流! ---------- 高级for循环   格式: for(数据类型 变量名 : 被遍历的集合(Collection)或者数组) {   ...

  10. Anroid 异常：is not valid; is your activity running?

    本文转载于:http://blog.csdn.net/biangren/article/details/7514722 是由于有activity时依附于另一个activity的,当被依附的activi ...