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

效果如下图：

利用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. ERROR 1130: Host ’...′ is not allowed to connect to this MySQL server

    /******************************************************************** * ERROR 1130: Host ’...′ is no ...

  2. 一直纠结中的"底层模板"含义（借鉴）

    无意间看到这个解释,推荐给哪些和我一样迷惑的人!

  3. 分布式消息队列kafka系列介绍 — 核心API介绍及实例

    原文地址:http://www.inter12.org/archives/834 一 PRODUCER的API 1.Producer的创建,依赖于ProducerConfig public Produ ...

  4. 全国信息学奥林匹克联赛 ( NOIP2014) 复赛 模拟题 Day1 长乐一中

    题目名称 正确答案  序列问题 长途旅行 英文名称 answer sequence travel 输入文件名 answer.in sequence.in travel.in 输出文件名 answer. ...

  5. 《Java程序设计》第6周学习总结

    学号20145220 <Java程序设计>第6周学习总结 教材学习内容总结 InputStream与OutputStream 10.1.1串流设计的概念 Java将输入/输出抽象化为串流, ...

  6. JS数组随机排序

    var arr=[1,2,3,4,5]; arr.sort(function(a,b){ var v=Math.random()>0.5?1:-1; console.log(a,b,v); re ...

  7. 【BZOJ1004】【HNOI20008】cards

    看黄学长的代码才写出来的,sro_hzwer_orz 原题: 小春现在很清闲,面对书桌上的N张牌,他决定给每张染色,目前小春只有3种颜色:红色,蓝色,绿色.他询问Sun有多少种染色方案,Sun很快就给 ...

  8. 常见半监督方法 (SSL) 代码总结

    经典以及最新的半监督方法 (SSL) 代码总结 最近因为做实验需要,收集了一些半监督方法的代码,列出了一个清单: 1. NIPS 2015 Semi-Supervised Learning with ...

  9. excel动态去重和动态排序

    其实去重和排序的方法很多,没有哪一种更好,实时去重总会省一些时间,刚好也练习了下数组公式 动态去重: =IF(ROW()<=COUNTA(员工基础数据!H:H),INDEX(员工基础数据!H:H ...

  10. NOSQL Benchmarks

    www.planetcassandra.org/nosql-performance-benchmarks/ http://www.planetcassandra.org/nosql-performan ...