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

效果如下图：

利用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. C++ 并发消息队列

    C++ 并发消息队列 在网上找到了一份POSIX线程显示的并发消息队列示例代码: http://codereview.stackexchange.com/questions/41604/thread- ...

  2. sgu546 Ternary Password

    题目链接:http://acm.sgu.ru/problem.php?contest=0&problem=546 这题还好,1Y,考虑情况周全,就没问题了,还好提交之前把想到的情况都测试了一遍 ...

  3. c++将引用作为函数的参数---6

    原创博客:转载请标明出处:http://www.cnblogs.com/zxouxuewei/ 引用经常被用作函数参数,使得函数中的变量名成为调用程序中的变量别名.这种传递参数 的方法称为按引用传递. ...

  4. POJ Girls and Boys (最大独立点集)

                                                                Girls and Boys Time Limit: 5000MS   Memo ...

  5. android中ListView_SimpleAdapter

    1.首先看下main_activity.xml.其实里面就放了一个ListView. <LinearLayout xmlns:android="http://schemas.andro ...

  6. IOS开发之SWIFT进阶部分

    概述 上一篇文章<iOS开发系列--Swift语言> 中对Swift的语法特点以及它和C.ObjC等其他语言的用法区别进行了介绍.当然,这只是Swift的入门基础,但是仅仅了解这些对于使用 ...

  7. 状态压缩dp 入门

    1.有一张n*m (n<=m)的棋盘,在上面放n个中国象棋里的车,使得任意两个车不能相互攻击,总共有多少种不同的方案. 2.有一张n*m (n<=m)的棋盘,其中有些格子里面不能放,在上面 ...

  8. 黑马程序员——JAVA基础之简述 类的继承、覆写

    ------- android培训.java培训.期待与您交流! ---------- 继承的概述: 多个类中存在相同属性和行为时,将这些内容抽取到单独一个类中,那么多个类无需再定义这些属性和行为,只 ...

  9. 【转】 iOS 开发之静态库.a和动态库详解 -- 不错

    原文网址:http://blog.csdn.net/lxl_815520/article/details/52154331 一, 简单介绍 1.什么是库 库是程序代码的集合,是共享程序代码的一种方式 ...

  10. 在Windows上安装Maven

      下载 Maven 最新版本. http://maven.apache.org/download.cgi   1,下载包后,解压到相应特定位置. 2,将 [解压位置]/bin  加入到Path 3, ...