jQuery实现简单的滑动导航代码(移动端)
更新时间：2017年05月22日 16:14:04 作者：csdn_chenli
这篇文章主要介绍了jQuery实现简单的滑动导航代码,适合用于移动端。需要的朋友可以参考下
1.1 App滑动导航
说明：这个例子主要是实现一条导航山只有两个选项的。
1.适合用于移动端。
2.滑动条的长度是选项内容的长度。
1.1.1. 效果图
1.1.2. Html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>滑动导航</title> </head> <body> <ul class="slid"> <li><a href="#" rel="external nofollow" rel="external nofollow" >滑动到岗</a></li> <li><a href="#" rel="external nofollow" rel="external nofollow" >滑动到岗</a></li> <span id="navLine"></span> </ul> <script type="text/JavaScript" src="js/jQuery-1.9.1.min.js"></script> </body> </html>
1.1.3. Css
<style type="text/css">
body,div,p{
margin:0;
padding:0;
}
ul.slid{
display: block;
position:fixed;
top: 10px;
left:0px;
right:0px;
height:60px;
background: #f2f2f2;
overflow: height;
}
ul.slid li{
display: inline-block;
width: 49%;
height: 40px;
margin-top: 10px;
float: left;
text-align: center;
overflow: hidden;
}
ul.slid li:first-child{
border-right: 1px solid red;
}
ul.slid li a{
display: inline-block;
width: 120px;
text-decoration:none;
height:37px;
line-height: 37px;
color: #898989;
overflow: hidden;
}
ul.slid li a:hover{
color: red;
}
#navLine{
height:2px;
background-color:red;
position:absolute;
bottom:7px;
width:0px;
left:0px;
display:none;
overflow:hidden;
}
</style>
1.1.4. jQuery
<script type="text/javascript">
$(function (){
navSlid();
});
//滑动导航
var navSlid = function(){
var nline = $('#navLine');
var lia = $('ul.slid li a');
//初始化滑块
nline.css({
'width':lia.width(),
'left' :parseInt(lia.position().left)
});
$('ul.slid li a').mouseenter(function(){
//显示滑块
if(nline.css('display') == 'none'){
nline.show();
};
//移动滑块
nline.stop().animate({
width: $(this).width(),
left: parseInt($(this).position().left)
},300);
});
};
</script>
相关文章
可以显示单图片，多图片ajax请求的ThickBox3.1类下载
ThickBox是一个基于JQuery类库的扩展 以下的是ThickBox3.1的实例+代码调用方法2007-12-12
这篇文章主要介绍了JQuery球队选择实现方法,实例分析了jQuery中鼠标事件与页面元素相关操作技巧,需要的朋友可以参考下2015-05-05
jQuery插件MovingBoxes实现左右滑动中间放大图片效果
本篇文章主要介绍jQuery中MovingBoxes左右滑动放大图片插件示例，实现左右滑动和放大效果，有兴趣的可以了解一下。2017-02-02
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
这篇文章主要介绍了jQuery实现点击自身以外区域关闭弹出层功能,结合具体实例形式分析了jQuery事件响应及页面元素属性动态操作实现弹出层打开与关闭相关操作技巧,需要的朋友可以参考下2018-07-07
我们都知道，在传统的排版当中使用DIV+CSS来实现的话是很困难的，今天使用jquery插件，你可以实现卓越的排版效果，专门用于为您提高您的排版水平2012-09-09
Json是一种轻量级的数据交换格式，本节为大家介绍的是Jquery解析Json格式数据的过程，很详细，看看就知道了2014-10-10
这篇文章主要介绍了jQuery中DOM节点的删除方法,文中介绍的很相信，内容包括empty()的基本用法、remove()的有参用法和无参用法、empty和remove区别、保留数据的删除操作detach()以及detach()和remove()区别，需要的朋友可以参考借鉴。2017-01-01
Jquery validation remote 验证的缓存问题解决方法
这篇文章主要介绍了Jquery validation remote 验证的缓存问题的解决方法 ,需要的朋友可以参考下2014-03-03
这篇文章主要介绍了jQuery实现跨域的相关资料,需要的朋友可以参考下2015-02-02
如何避免JQuery Dialog的内存泄露，需要的朋友可以参考下。2010-06-06
最新评论