溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹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如何實現滑動導航”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
