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

效果如下图：

利用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. Fix VNC Desktop Sharing on Ubuntu Desktop 14.04

    Solution 1 sudo apt-get -y install dconf-tools dconf write /org/gnome/desktop/remote-access/require- ...

  2. R 学习1

    首先安装吧 http://cran.rstudio.com/bin/windows/base/R-3.2.1-win.exe 里面既有32位又有64. R有很多包,如果有的包本地没有,来这里搜 htt ...

  3. Y_TEXT001-(保存长文本)

    DATA: gs_header TYPE thead .DATA: gt_ltxts TYPE STANDARD TABLE OF tline .DATA: lw_ltxt TYPE tline . ...

  4. Educational Codeforces Round 15 A dp

    A. Maximum Increase time limit per test 1 second memory limit per test 256 megabytes input standard ...

  5. zf2 中 new Express 的用法

    在使用联表查询时,如查联表条件有多个也可以,但是连接条件在zf2中会自动给列加``符号,所以要加像id = 1 这样的,他自动给1加｀｀就无示执行了,这时候可以使用new Express(''),他里 ...

  6. 《灰帽Python-黑客和逆向工程师的Python编程》学习记录

    ctypes是Python语言的一个外部库,提供和C语言兼容的数据类型,可以很方便的调用C DLL中的函数. 操作环境:CentOS6.5 Python版本:2.66 ctypes是强大的,强大到本书 ...

  7. ExtJS-Viewport背景图片铺满浏览器视图并自动伸缩

    var viewport = Ext.create('Ext.container.Viewport', { style : 'background-image:url(login_bj.jpg);ba ...

  8. c++文件操作相关

    file operation API functions HANDLE CreateFile(lpFileName,dwDesiredAccess,dwShareMode,lpSecurityAttr ...

  9. Machine Learning and Data Science 教授大师

    http://www.cs.cmu.edu/~avrim/courses.html Foundations of Data Science Avrim Blum, www.cs.cornell.edu ...

  10. Oracle RAC 并发与架构

    10g RAC进程总概 一． RAC 并发 RAC 的本质是一个数据库,运行在多台计算机上的数据库,它的主要任务是数据库就是事务处理,它通过 Distributed Lock Management(D ...