这篇文章主要介绍Jquery如何实现滑动导航，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！1.1 App滑动导航说明：这个例子主要是实现一条导航山只有两个选项的。1.适合用于移动端。
这篇文章主要介绍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>以上是“jQuery如何实现滑动导航”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注编程网VUE频道！
--结束END--
本文标题: jQuery如何实现滑动导航
本文链接: https://www.lsjlt.com/news/67593.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0