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

效果如下图：

利用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# 入门篇之listview用法

    在用listview,经常对各种属性都不了解,用完了,下次又忘:写个随笔记记. 看到别人已经有总结很详细的,就直接转过来了,可能中间会有一些自己加的. ------------------------ ...

  2. 设置mysql远程连接root权限

    在远程连接mysql的时候应该都碰到过,root用户无法远程连接mysql,只可以本地连,对外拒绝连接.需要建立一个允许远程登录的数据库帐户,这样才可以进行在远程操作数据库.方法如下:默认情况下MYS ...

  3. linux安装sqlcmd登录sqlserver

    首先从微软网站下载sqlncli安装文件,link. 因为是在内网安装,首先手工下载unixODBC2.3.0.tar.gz,下载后上传到服务器. 将下载的tar文件文件,放在同build_dm.sh ...

  4. ztong上机3

    二.实验名称:数字图像处理matlab上机 三.实验学时:2学时 四.实验目的:(详细填写) 掌握几何变换 掌握插值 理解配准的概念 五．实验内容 (1)首先自己写一个对图像进行旋转和缩放的复合变换程 ...

  5. leetcode 148. Sort List ----- java

    Sort a linked list in O(n log n) time using constant space complexity. 排序,要求是O(nlog(n))的时间复杂度和常数的空间复 ...

  6. phpwind8.7升级9.0.1过程（二）8.7正式升级9.0

    首先备份 1. 给本地做备份将网站根目录下面的所有文件先做备份. 2. 给本地数据库做备份 3. 了解升级的具体过程 phpwind8.7升级到9.0需要首先升级到phpwind9.0的原生版本即:2 ...

  7. Android——网格布局仿计算器

    代码如下: <?xml version="1.0" encoding="utf-8"?> <GridLayout xmlns:android= ...

  8. 【usaco】patrol

    很长时间都没想出来的简单题,看了题解才写出来,还是naive 原题: FJ有个农场,其中有n块土地,由m条边连起来.FJ的养牛场在土地1,在土地n有个新开张的雪糕店.Bessie经常偷偷溜到雪糕店,当 ...

  9. Sublime Text3快捷方式与使用技巧

    Sublime Text 3 快捷键精华版 Ctrl+Shift+P:  打开命令面板Ctrl+P:  搜索项目中的文件Ctrl+G: 跳转到第几行Ctrl+W: 关闭当前打开文件Ctrl+Shift ...

  10. java的nio之：java的nio系列教程之buffer的概念

    一:java的nio的buffer==>Java NIO中的Buffer用于和NIO通道Channel进行交互.==>数据是从通道channel读入缓冲区buffer,从缓冲区buffer ...