<!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. Rafy 领域实体框架 - 公司内部培训视频

    本月给公司内部一个项目做架构重构,其中使用到了 Rafy 框架.所以我培训了 Rafy 领域实体框架的使用方法,过程中录制了视频,方便其他同事查看.现在把视频放到园里来分享下,有兴趣的朋友可以看看,有 ...

  2. php N 维数组的读取、设置、删除

    <?php // 例子 $rowList = array(); $rowList[] = array('A'=>'A_1','B'=>'A_1_1','C'=>'A_1_1_1 ...

  3. ListFragment的使用

    ListFragment继承了Fragment,顾名思义,ListFragment是一种特殊的Fragment,它包含了一个ListView,在ListView里面显示数据. 1. MainActiv ...

  4. 使用PhantomJS实现网页截图服务

    这是上半年遇到的一个小需求,想实现网页的抓取,并保存为图片.研究了不少工具,效果都不理想,不是显示太差了(Canvas.Html2Image.Cobra),就是性能不怎么样(如SWT的Brower). ...

  5. Java集合-Python数据结构比较

    Java list与Python list相比较 Java List:有序的,可重复的.(有序指的是集合中对象的顺序与添加顺序相同) Python list(列表)是有序的,可变的. Java Lis ...

  6. （转）SqlServer 数据库同步的两种方式 (发布、订阅)，主从数据库之间的同步

    最近在琢磨主从数据库之间的同步,公司正好也需要,在园子里找了一下,看到这篇博文比较详细,比较简单,本人亲自按步骤来过,现在分享给大家. 在这里要提醒大家的是(为了更好的理解,以下是本人自己理解,如有错 ...

  7. Django简介和安装

    Django 最开源地方就是可以使用强大第三方插件1,Django默认没有提供对象(Object)级别的权限控制,我们可以通过该Django Guardian 扩展来帮助Django实现对象级别的权限 ...

  8. Stream

    Stream的好处 1.Stream AP的引入弥补了JAVA函数式编程的缺陷.2.Stream相比集合类占用内存更小:集合类里的元素是存储在内存里的,Stream里的元素是在访问的时候才被计算出来. ...

  9. ThinkPHP 整合Bootstrap Ajax分页

    ThinkPHP Ajax分页代码 publicfunction index() { $where=array(); $name = I('name'); if(!empty($name)){ $wh ...

  10. C++02.访问控制

    1.class是struct的扩展,它包括数据成员和成员函数. 2.在C++中,有三种访问权限: (1)private:默认,只供类内部的函数使用. (2)public:类外的程序可以使用. (3)p ...