精简的代码实现导航栏滑动效果，实现详解：

1.滑块位置：通过父节点position=fixed，子节点position=absolute方式，实现子节点浮动；

2.导航栏居中：通过left=0px，right=0px，margin-left=auto，margin-right=auto实现；

3.通过jQuery动态改变滑块的Left和Width，然后通过animate实现动画效果。

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8"></meta>

     <title>滑动导航栏</title>

     <script scr=""></script><script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

     <link rel="stylesheet" href="style.css" type="text/css" />

     <style type="text/css">

         body,div,p{

             margin:0;

             padding:0;

         }

         .nav{

             background-color:black;

             position:fixed;

             left:0px;

             right:0px;

             width:80%;

             margin:10px auto;

             text-align:center;

             height:37px;

         }

         .nav a{

             padding:10px;

             color:white;

             line-height:30px;

             text-decoration:none;

             height:37px;

         }

         #navslip{

             height:2px;

             background-color:#8f919e;

             position:absolute;

             bottom:7px;

             width:0px;

             left:0px;

             display:none;

             overflow:hidden;

         }

     </style>

 </head>

 <body>

     <div class="nav">

         <a href="http://baidu.com" target="_black" >百度</a>

         <a href="http://sina.com" target="_black" >新浪</a>

         <a href="http://58.com" target="_black" >58同城</a>

         <a href="http://sentsin.com/message/" target="_black" title="留言">致时光</a>

         <a href="http://sentsin.com/daohang/" target="_black">前端圈</a>

         <i id="navslip"></i>

     </div>

     <script>

         $(function (){

             setSlip();

         });

         var setSlip = function(){

             var slip = $('#navslip');

             var a = $('.nav a:first');

             //初始化滑块

             slip.css({

                 'width':a.width()+10,

                 'left' :parseInt(a.position().left) + 5 +'px'

             });

             $('.nav a').mouseenter(function(){

                 //显示滑块

                 if(slip.css('display') == 'none'){

                     slip.show();

                 };

                 //移动滑块

                 slip.stop().animate({

                     width: $(this).width()+10,

                     left:  parseInt($(this).position().left) + 5 +'px'

                 },300);

             });

         };

     </script>

 </body>

 </html>

附上效果图：

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAABCAAAAAwCAIAAABPF5y6AAAFY0lEQVR4nO3d25HjKBQAUGfosPy5tQlsDk7EYTgN7Ud7uiUBF/CgR3efU1tTNkISCPnCXVszlwkAAGCQy9ENAAAAfg4JBgAAMIwEAwAAGEaCAQAADNOXYFwAAIBfQ4IBAAAMI8EAAACGkWAAAADDSDAAAIBhJBgAAMAwEgzgezsqzvzleX9eeCz16KP8wP6+ferqjme797LlXZUBhpBgAIcZFUyOCjXBeVebsjVPHiF7B6XUnc/yTfsbNO/t86Y7xl3ec0C77qh5eXpZVlv/8sMIcJFgAGdTjRuHB5/S6eKzT7P13LcIlS0D0VJ/596lpwsa1jhkpcLGK7CF9m5eOhOM9hcAJY0z9SII99UGaNYSNEorvMMDTtyAYH22R8tvj0VoftwyG573a0+rpsLy+sBJoevaVm+e0r7ZodxhEHsn31JhYy/m9U/1QQPOrytevQJUb4wDaNEYMeL10D6y5802IC1sKRnvdl9kDy/X+/Mrrbg95onH18qyFNtXzS5dh/3HZTU6pYkpHcTGiSw9wjea7OIOxtchO+4AqSCMFMNLX22AUG8YOUnkmZr/z+6ULLj3b/D1fr9lim+PeUpxvT9nb6utmmbL66A7u00E6VjELamOXfsV2FP101Haq/Hg1b0O6TXwvbTM1Oto1lcbIBQHingJVV0jDhfEulIAXL2Ie7SRQoJxvT9nv4u63p/JNxiBqbAYbSwfKxiUaoNLbVtVOMnEl2129iKnr6ttPkMHgR+gK2a+AktfbYBQHCjSrVO4hNrT1LmSno5NMD6ftpg/a3G9P6ePX0Yt04uGLyiC7s9rVi/LWKvTBXdIdbYKGnzgjZc9dfYix42MuxzUN7MDVV3JwisI99UGCMWBIl4YHRtwpvIKO6h8SKicP1+xfNbien8+Ho9pWj/j3f2NRFo+HZpgpG9bNgX1Gw+7teyd8/ZgpQef/7k60WpAAUpacoR1kOmrDRDqDSOHB5ZSI6dwJZ1uPawjX89azH8itXjg+zI6wdits6UbJr6Rsq+DNpf23UHc1JZBCT5i87elEx3+AQTOrzqzZwJRX22AUBwo0q1T+GvyDRtaa1tpZbZqWKnahg1d+/Ns9/pXUYtnvrPt7Cr/HKm08hZKd0KpAaXrX+pgy747iJuaHZTS1ShtTY95YH+B76grWXgFmb7aAKE4UATrwnjJuKns+qyxYaXV3paSX0V9fFWx/EukggQjG9inZC1bqrDnXJA9V7Wwfa+0PH47XDwW2caUbrnS1uBQaTlAqitZeEWzvtoAoThQtC/mdgs4pVVdsAJrWbdtaZE53B6fP4VaJB7Lv6X2nV/dzN+Wao7rVF7p4mfL49mq1Nr2e3IL8T1f6shqUNI/s7tnL5GZHajqShZeEaavNkAoDhTV1dvO0aa0GgtWadmtcf0NzP7F7vW3Fn/8xb/kna4+Vy/SXm9kNQEF17k6BI2F1Vt0rK47Lf1opMPReyua2YGqrmThFan6agOE2sPIlCyVpmQ5tVubL+WVWdqMajtPGDCD9qTdL+212wC13DDZktLRunbfc+KbwtwguP6l3dMxav9IAmQ1BpNFYOmrDRCKA0W6NQ4vuwWfqbyQ7e3ROb3Ri+p12LTvjaPQ2Ib0aCcZuM9mvHd54369cQSAVFey8ApEfbUBAIBfQ4IBAAAMI8EAAACGkWAAAADDSDAAAIBhJBgAAMAwEgyAn+aff//7Rv8dfbUAGEyCAfDTHJ4zSDAAfjMJBgAAMIwEAwAAGEaCAQAADCPBAAAAhpFgAAAAw0gwAACAYSQYAADAMJsnGAAAAAEJBgAAMIwEAwAAGEaCAQAADCPBAAAAhpFgAAAAw/wP0zI3KcQxxowAAAAASUVORK5CYII=" alt="" />

jquery 实现导航栏滑动效果的更多相关文章

  1. 原生JS实现全屏切换以及导航栏滑动隐藏及显示——重构前

    思路分析: 向后滚动鼠标滚轮,页面向下全屏切换:向前滚动滚轮,页面向上全屏切换.切换过程为动画效果. 第一屏时,导航栏固定在页面顶部,切换到第二屏时,导航条向左滑动隐藏.切换回第一屏时,导航栏向右滑动 ...

  2. 【前端】javascript实现导航栏筋斗云效果特效

    实现效果: 实现效果如下图所示 实现原理: 什么是筋斗云效果: 这个效果很简单,就是鼠标移到其他导航目录时会有背景图片跟着鼠标滑动到当前的目录. 实现思路: 鼠标经过的时候,利用offsetLeft获 ...

  3. 通过html和css做出下拉导航栏的效果

    通过观察了百度的首页,对于更多产品一栏,觉得可以不涉及JS便可写出下拉导航栏的效果 1.先设计出大体的框架 <div class="nav"> <ul> & ...

  4. jQuery Mobile 导航栏

    jQuery Mobile 导航栏 导航栏由一组水平排列的链接构成,通常位于页眉或页脚内部. 默认地,导航栏中的链接会自动转换为按钮(无需 data-role="button"). ...

  5. jQuery实现导航栏

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. 微信小程序导航栏，下面内容滑动，上册导航栏跟着滑动，内容随着导航栏滑动

    16.类似微信导航栏滑动.png 今日头条导航栏,下面滑动上面跟着滑动 index.wxml <swiper class="content" style="heig ...

  7. Flutter实战视频-移动电商-04.底部导航栏切换效果

    04.底部导航栏切换效果 博客地址: https://jspang.com/post/FlutterShop.html#toc-291 我们要做的效果图: 新建四个页面 home_page.dart ...

  8. jquery实现导航栏跟随窗口滚动

    最近在制作一个模版的时候用到的一个jquery插件,当网站导航滚动到当前可见页面顶部时,固定在顶部并随窗口滚动,有很多的网站前台模版有有类似的效果. smohan.fixednav.js /* * 随 ...

  9. 炫酷：一句代码实现标题栏、导航栏滑动隐藏。ByeBurger库的使用和实现

    本文已授权微信公众号:鸿洋(hongyangAndroid)原创首发. 其实上周五的时候已经发过一篇文章.基本实现了底部导航栏隐藏的效果.但是使用起来可能不是很实用.因为之前我实现的方式是继承了系统的 ...

随机推荐

  1. locate: can not stat () `/var/lib/mlocate/mlocate.db': No such file or directory

    安装好CentOS后,第一次进入系统使用locate命令,结果出现:locate: can not stat () `/var/lib/mlocate/mlocate.db': No such fil ...

  2. Hibernate 查询：HQL查询(Hibernate Query Languge)

    HQL是一种面向对象的查询语言,其中没有表和字段的概念,只有类,对象和属性的概念. 使用HQL查询所有学生: public static void main(String[] args) { Sess ...

  3. GridView事件DataBinding,DataBound,RowCreated,RowDataBound区别及执行顺序分析

    严格的说,DataBinding,DataBound并不是GridView特有的事件,其他的控件诸如ListBox等也有DataBinding,DataBound事件. DataBinding事件MS ...

  4. Java的动态代理机制详解（转）

    在学习Spring的时候,我们知道Spring主要有两大思想,一个是IoC,另一个就是AOP,对于IoC,依赖注入就不用多说了,而对于Spring的核心AOP来说,我们不但要知道怎么通过AOP来满足的 ...

  5. Git学习笔记：Git基础

    一.Git与其他版本控制系统的差别 Git 只关心文件数据的整体是否发生变化,而大多数其他系统则只关心文件内容的具体差异.这类系统每次记录有哪些文件作了更新,以及都更新了哪些行的什么内容.如下图,其他 ...

  6. 高性能WEB开发 为什么要减少请求数，如何减少请求数!

    http请求头的数据量 [声明] 转载  原文出处:http://www.blogjava.net/BearRui/. 谢谢我们先分析下请求头,看看每次请求都带了那些额外的数据.下面是监控的googl ...

  7. Oracle EBS-SQL (MRP-6):检查MRP计划运行报错原因之超大数据查询1.sql

    /*逐一运行检查计划运行超大数据*/ ---------------------------------------------------- /*查询-1*/ select  plan_id, 'C ...

  8. 深入研究 Win32 结构化异常处理（作者博客有许多SEH的研究文章）

    摘要 就像人们常说的那样,Win32 结构化异常处理(SEH)是一个操作系统提供的服务.你能找到的所有关于 SEH 的文档讲的都是针对某个特定编译器的.建立在操作系统层之上的封装库.我将从 SEH 的 ...

  9. hdu 1757 A Simple Math Problem_矩阵快速幂

    题意:略 简单的矩阵快速幂就行了 #include <iostream> #include <cstdio> #include <cstring> using na ...

  10. SharePoint 2013的100个新功能之场管理

    一:改进的SPSite命令 SharePoint 2013中对SPSite PowerShell命令行做了改进提升,使网站集操作更简便.比如,一个新的参数“HostHeaderWebApplicati ...