溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
很多電商網站都使用樓層導航效果來布局，如京東，唯品會等大型網站。那樓層導航效果怎么寫了，其實很簡單，主要用到鼠標滾動事件和高度的應用。現在我們就來用jquery來寫以下。代碼是直接copy過來的，因為注釋比較多所以看起來有點亂。感興趣的同學可以下載下面的源碼來學習。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>樓層導航3</title>
<style>
*{margin: 0;padding: 0;}
#container{width: 900px;margin: 0 auto;}
#container>*{width: 100%;}
.header{height: 2000px;background: red;}
.floor{height: 1000px;font:bold 25px/30px "微軟雅黑";}
.footer{height: 500px;background: red;}
#nav{width: 100px;position: fixed;left: 20px;bottom:300px;list-style: none;display: none;cursor: pointer;}
#nav li{height: 35px;line-height: 35px;border-bottom: 1px dashed #ccc;text-align: center;position: relative;font-size: 25px;margin-top: 1px;}
#nav li span{position: absolute;display: inline-block;height: 35px;line-height: 35px;width: 100%;text-align: center;left: 0;top: 0;display: none;background: #f00;color: #fff;}
</style>
<script src="jquery-1.12.4.js"></script>
<script>
$(function(){
var winHeight = $(window).height(), //獲取瀏覽器可是窗口的蓋度
headerHeight = $('.header').height(), //獲取header的高度
onOff = false; //布爾值變量,通錯這個變量可以防止快速連續點擊的時候出現的連續滾動
$(window).on('scroll',function(){
var scTop = $(window).scrollTop(); //獲取滾動條的滾動距離
//當樓側開始出現時顯示樓層導航條
if(scTop >= headerHeight - winHeight){
$('#nav').show(400); //也可以不傳參數，傳參數表示運動時間
}else{
$('#nav').hide(400);
}
//滾動時切換顯示樓層
if(!onOff){
$('.floor').each(function(index,element){
var _top = $(this).offset().top;
//當每層樓的最上面滾動到瀏覽器窗口的中間時切換導航條的顯示
if(scTop >= _top - winHeight / 2){
//此處添加curr類樣式并不是改變顯示樣式，而是為了標當前所在的樓層
$('#nav>li').eq(index).addClass('curr').children().show()
.end().siblings().removeClass('curr').children().hide();
}
});
}
})
$('#nav>li').hover(function(){
$(this).children().show();
},function(){
//此處用到.not('.curr')來過濾當前樓層，鼠標移開時仍然保持當前的顯示樣式
$(this).not('.curr').children().hide();
}).on('click',function(){
onOff = true; //將開關變量onOff置為true
var index = $(this).index(), //獲取當前電機的li的索引
_top = $('.floor').eq(index).offset().top;//獲取相對于的樓層到文檔頂部的距離
$(this).addClass('curr').children().show().end()
.siblings().removeClass('curr').children().hide();
$('html,body').animate({'scrollTop':_top},400,function(){
onOff = false; //在運動執行完畢的毀掉函數中將onOff的值重置為false
});
//或者也可以用scrollIntoView()方法，只是該方法沒有滾動的效果，而是直接跳到瀏覽器可是窗口的最上面.用法如下：
/*var index = $(this).index();
$('.floor').get(index).scrollIntoView();*/
});
});
</script>
</head>
<body>
<div id="container">
<div class="header">header</div>
<div class="main">
<div class="floor" >1F</div>
<div class="floor" >2F</div>
<div class="floor" >3F</div>
<div class="floor" >4F</div>
<div class="floor" >5F</div>
<div class="floor" >6F</div>
<div class="floor" >7F</div>
</div>
<div class="footer">footer</div>
</div>
<div>
<ul id="nav">
<li>1F<span class="curr">1樓</span></li>
<li>2F<span>2樓</span></li>
<li>3F<span>3樓</span></li>
<li>4F<span>4樓</span></li>
<li>5F<span>5樓</span></li>
<li>6F<span>6樓</span></li>
<li>7F<span>7樓</span></li>
</ul>
</div>
</body>
</html>
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
