<!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. Atitit Atitit.软件兼容性原理----------API兼容 Qa7

    Atitit Atitit.软件兼容性原理----------API兼容 Qa7 1. 兼容性的重要性与反面教材1 2. 提升兼容性的原则2 2.1. What 与how 分离2 2.2. 老人老办法 ...

  2. js类型检测总结

    类型检测: 类和对象: Call,Apply,Bind

  3. 便于开发的Helper类

    一.将config封装实体层: 例子config: <?xml version="1.0" encoding="utf-8" ?> <Sett ...

  4. 整理UIImagePickerController问题

    [assetsLibrary addAssetsGroupAlbumWithName:@"iOSDevTip1" resultBlock:^(ALAssetsGroup *grou ...

  5. iOS开发中的数学函数

    在iOS开发当中...我们往往会涉及到一些算法...为了节省一些时间...让APP很快地被开发出来...我们需要对各类函数有一定的了解...接下来...我把部分常用函数分享出来...希望能帮到大家.. ...

  6. mac,/usr/local is not writable 解决方法

    mac,/usr/local is not writable 解决方法 mac 问题 今天在mac上装mongodb,发现提示权限不足问题,错误提示如下: mac安装mongodb错误提示.jpg 尝 ...

  7. 做JavaWeb开发不知Java集合类不如归家种地

    Java作为面向对象语言对事物的体现都是以对象的形式,为了方便对多个对象的操作,就要对对象进行存储.但是使用数组存储对象方面具有一些弊端,而Java 集合就像一种容器,可以动态地把多个对象的引用放入容 ...

  8. 使用vscode访问和修改远程计算机文件

    使用vscode访问和修改远程文件,分三步实现:在远程linux机器上安装rmate:在本地windows上安装openssh:在vscode中安装扩展remote vscode. 1. 在远程lin ...

  9. hibernate注解CascadeType

    http://blog.csdn.net/strong8808/article/details/6318994(参考) CascadeType.REFRESH:级联刷新,当多个用户同时作操作一个实体, ...

  10. SQL面试笔试经典题(Part 2)

    本文是在Cat Qi的原贴的基础之上,经本人逐题分别在MySql数据库中实现的笔记. 参考原贴:http://www.cnblogs.com/qixuejia/p/3637735.html 01 问题 ...