<!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. shell脚本规划化模板

    shell脚本规划化模板 Linux运维过程中,shell脚本是不可缺少的工具,但是每个运维人员编程的习惯都不一样,很多时候就是实现某个功能,写出来的脚本都是烂七八糟的.脚本必须规范化,应该从以后几个 ...

  2. Web API项目中使用Area对业务进行分类管理

    在之前开发的很多Web API项目中,为了方便以及快速开发,往往把整个Web API的控制器放在基目录的Controllers目录中,但随着业务越来越复杂,这样Controllers目录中的文件就增加 ...

  3. asp.net创建事务的方法

    1.建立List用于存放多条语句 /// <summary> /// 保存表单 /// </summary> /// <param name="context& ...

  4. Scrapy开发指南

    一.Scrapy简介 Scrapy是一个为了爬取网站数据,提取结构性数据而编写的应用框架. 可以应用在包括数据挖掘,信息处理或存储历史数据等一系列的程序中. Scrapy基于事件驱动网络框架 Twis ...

  5. 2015年软件测试STATE报告

    STATE OF TESTING 2015 Report 测试职业的地理位置分配 大部分有5年以上工作经验 大部分是Test Leader   测试工程师角色   测试工程师怎么工作的? 测试中的软件 ...

  6. SpringAOP与Redis搭建缓存

    近期项目查询数据库太慢,持久层也没有开启二级缓存,现希望采用Redis作为缓存.为了不改写原来代码,在此采用AOP+Redis实现. 目前由于项目需要,只需要做查询部分: 数据查询时每次都需要从数据库 ...

  7. JAVA大数据数组排序

    对于数据排序大家肯定见过不少,选择排序或者冒泡排序等等,今天我们要做的是快速排序 + 直接插入排序来对大数据(1000万以上)进行排序,下面我们分别来看看这两种排序规则 1, 直接插入排序 (1)基本 ...

  8. JS函数声明的问题

    三个例子 var a = 10; 2 function test(){ 3 a = 100; 4 console.log(a); 5 console.log(this.a); 6 var a; 7 c ...

  9. 针对JS经典题型对全局变量及局部变量的理解浅谈

    第一次写博,还蛮激动... 看到了三题经典题型,就我目前的认识对此题进行总结.如有错误,敬请指正 首先,我们先明确一下JS引擎的工作步骤: js引擎工作分为两步: 1.将这个js中的变量和函数声明保存 ...

  10. ArcGIS Engine开发之地图基本操作（3）

    地图数据的加载 一.加载Shapefile数据 Shapefile文件是目前主流的一种空间数据的文件存储方式,也是不同GIS软件进行数据格式转换常用的中间格式.加载Shapefile数据的方式有两种: ...