<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
<title>小滑块导航栏</title>
</head>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.ulbox{
position: relative;
clear: both;
}
.nav{
height: 30px;
line-height: 30px;
}
.nav li{
list-style: none;
display: block;
float: left;
}
.nav li a{
display: block;
background-color: #000;
text-decoration: none;
color: #FFFFFF;
border-radius: 5px;
}
span{
position: absolute;
bottom: 0;
display: block;
height: 3px;
background-color: #FF6600;
}
</style>
<body>
<div class="ulbox">
<ul class="nav">
<li><a href="#">导航一</a></li>
<li><a href="#">导航二</a></li>
<li><a href="#">导航三</a></li>
<li><a href="#">导航四</a></li>
<li><a href="#">导航五</a></li>
<li><a href="#">导航六</a></li>
<li><a href="#">导航七</a></li>
</ul>
<span class="line"></span>
</div>
</body>
<script type="text/javascript">
$(function(){
$('.ulbox .nav li').hover(function(){
var width=$(this).outerWidth(true);//获取当前li的宽度
var left=$(this).offset().left; //获取当前li的left值
$(".line").stop(true).animate({'left':left,'width':width},300);//为span标签添加滑动效果
},function(){
$(".line").animate({'left':'0','width':'0'},1000); //鼠标移出li时的动画
});
})
//.stop();停止当前动画，继续下一个动画，当是鼠标移动hover时 ，动画和显示不同步，显示达不到预期的结果。
//.stop(true);清除元素的所有动画，停止在当前状态
//.stop(false,true);让当前动画直接到达末状态 ，继续下一个动画
//.stop(true,true);清除元素的所有动画，让当前动画直接到达末状态
</script>
</html>

jquery版滑块导航栏的更多相关文章

  1. jquery侧边折叠导航栏制作，两行代码搞定

    jquery侧边折叠导航栏制作,两行代码搞定 //CSS*{margin: 0;padding: 0} ul{list-style: none} .menu li ul{display: none} ...

  2. 【1-4】jQuery代码风格-导航栏

    实现一个导航栏,单机不同的商品名称链接,显示相应的内容,同时高亮显示当前选择的商品. 实现功能如图: css: /* reset */ ;padding:0 0 12px 0;font-size:12 ...

  3. jQuery弹性滑块导航

    曾起何时在某网站上看到一弹性滑块导航的效果,瞬间被些效果吸引,开始以为是用FLASH实现的,但查源代码发现用的是JQuery缓动效果. 今天心血来潮想拿这个效果练练手.也看看这段时间学习JS及jque ...

  4. Jquery实现动态导航栏和轮播导航栏

    动态导航栏和轮播导航栏的实现思想: 利用jquery技术的append()方法和bind()方法实现li标签的添加和点击事件绑定,在利用$getJSON(url,data,function)请求方法实 ...

  5. HTML5开发移动web应用—JQuery Mobile(2)-导航栏和页脚

    导航栏部分的代码一般放置在data-role为header的div的内. <div data-role="header"> <a href="#&quo ...

  6. jQuery实现侧边导航栏效果

    效果图: 效果体验:http://keleyi.com/keleyi/phtml/jqmenu/2.htm 以下是完整代码: <!DOCTYPE html> <html> &l ...

  7. 导航菜单：jQuery粘性滚动导航栏效果

    粘性滚动是当导航在滚动过程中会占粘于浏览器上,达到方便网站页面浏览的效果,也是一种用户体验,下面我们看一下是怎么实现的: jQuery的 smint插件,也是一个导航菜单固定插件.当页滚动时,导航菜单 ...

  8. 基于Bootstrap、Jquery的自适应导航栏

    css代码: .kch_nav{width: 100%; position: fixed;z-index: 999;top:0;left: 0;right: 0;height: 69px;backgr ...

  9. jquery实现的导航栏切换

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

随机推荐

  1. 【C#】组件发布：MessageTip，轻快型消息提示窗

    -------------201610212046更新------------- 更新至2.0版,基本完全重写,重点: 改为基于原生LayeredWindow窗体和UpdateLayeredWindo ...

  2. QML 从无到有 2 （移动适配）

    随着项目深入,需要移植到安卓上,问题来了,QML安卓适配! 幸好PC端程序和手机屏幕长宽比例相似.虽然单位像素,尺寸不同,通过比例缩放,可以实现组件PC和安卓通用代码. 第一步:定义全局的转换函数(3 ...

  3. gRPC源码分析2-Server的建立

    gRPC中,Server.Client共享的Class不是很多,所以我们可以单独的分别讲解Server和Client的源码. 通过第一篇,我们知道对于gRPC来说,建立Server是非常简单的,还记得 ...

  4. 服务器搭建多个tomcat服务器

    以三个tomcat为例: 先配置环境变量: 编辑 /etc/profile 文件 添加三个tomcat环境变量:value为tomcat目录 //第一个tomcatCATALINA_BASE=/usr ...

  5. 保持Qt GUI响应的几种方法

    最开始使用Qt时就遇到过QT Gui失去响应的问题,我是用多线程的方式解决的,然而通常来说,多线程是会降低程序的运行速度. 之后,在使用QSqlQuery::execBatch()函数时,Qt Gui ...

  6. 3.1 js基本概念

    js中的语法大量借鉴于C以及其他类C语言(Java,Perl). js中一切(变量.函数名.操作符等等)都区分大小写.如"var a;"中的变量a跟"var A;&quo ...

  7. iOS -- 轮播图

    UIScrollView + 多张 ImageView 实现轮播 实现原理: 将所有图片的名字储存在数组 imageAry 中,imageAry 的元素个数为 num,在 scrollView 上添加 ...

  8. SDK接入(1)之Android Facebook SDK接入

    SDK接入(1)之Android Facebook SDK接入 由于游戏已上线,且处于维护阶段,所以有空写写各种SDK接入过程和遇到的问题,也当作一种工作总结.SDK接入主流分为这么几类,登录.支付. ...

  9. Android 自定义控件之继承ViewGroup创建新容器

    欢迎大家来学习本节内容,前几节我们已经学习了其他几种自定义控件,分别是Andriod 自定义控件之音频条及 Andriod 自定义控件之创建可以复用的组合控件还没有学习的同学请先去学习下,因为本节将使 ...

  10. 原创 C++应用程序在Windows下的编译、链接：第三部分 静态链接（二）

    3.5.2动态链接库的创建 3.5.2.1动态链接库的创建流程 动态链接库的创建流程如下图所示: 在系统设计阶段,主要的设计内容包括:类结构的设计以及功能类之间的关系,动态链接库的接口.在动态链接库中 ...