jQuery實現(xiàn)電梯導(dǎo)航案例詳解(切換?網(wǎng)頁區(qū)域)
更新時間：2022年05月11日 11:09:21 作者：卡卡西最近怎么樣
日常生活中用手機，電腦瀏覽網(wǎng)頁時，滑到了頁面下端后想返回頂部 或 跳轉(zhuǎn)到頁面別的版塊，用鼠標(biāo)滾動很麻煩，網(wǎng)頁電梯導(dǎo)航就可以很方便的精準(zhǔn)到達目標(biāo)版塊，本文給大家分享jquery電梯導(dǎo)航案例詳解，感興趣的朋友一起看看吧
前言：
日常生活中用手機，電腦瀏覽網(wǎng)頁時，滑到了頁面下端后想返回頂部 或 跳轉(zhuǎn)到頁面別的版塊，用鼠標(biāo)滾動很麻煩，網(wǎng)頁電梯導(dǎo)航 就可以很方便的精準(zhǔn)到達目標(biāo)版塊。
一：效果展示
【gif 動圖演示】格式轉(zhuǎn)換有些不清晰請諒解！功能實現(xiàn)包含以下：
- 點擊電梯導(dǎo)航切換到對應(yīng)板塊
- 移動光標(biāo)導(dǎo)航欄對應(yīng)板塊跟著移動
二：實現(xiàn)原理剖析
重點來啦?。。?/p>
2.1 網(wǎng)頁結(jié)構(gòu)：
結(jié)構(gòu)上分了兩部分，一部分是網(wǎng)頁版塊 banner-box，另一部分是網(wǎng)頁導(dǎo)航版塊 map-box，用了固定定位定在了右側(cè)，打開頁面是不顯示的，要滾動至第三個版塊后才會顯示導(dǎo)航
<div class="banner-box">
<div class="banner1">版 塊 一</div>
<div class="banner2">版 塊 二</div>
<div class="banner3">版 塊 三</div>
<div class="banner4">版 塊 四</div>
<div class="banner5">版 塊 五</div>
<div class="banner6">版 塊 六</div>
<div class="banner7">版 塊 七</div>
<div class="banner8">版 塊 八</div>
<div class="banner9">版 塊 九</div>
</div>
<div class="map-box">
<ul>
<li class="map">版塊1</li>
<li class="map">版塊2</li>
<li class="map">版塊3</li>
<li class="map">版塊4</li>
<li class="map">版塊5</li>
<li class="map">版塊6</li>
<li class="map">版塊7</li>
<li class="map">版塊8</li>
<li class="map">版塊9</li>
</ul>
</div>2.2 顯示隱藏函數(shù) 實現(xiàn)分析：
此塊顯示隱藏的代碼封裝在了一個單獨的函數(shù)內(nèi)，這是為了解決一個 bug 而方便調(diào)用，當(dāng)代碼移動到第三個板塊往后時，刷新頁面，此時雖然頁面在第三個版塊后，但是導(dǎo)航缺沒有顯示，這就需要單獨寫個函數(shù)方便調(diào)用 ----- 打開頁面就調(diào)用一次
- 所需知識點：scrollTop()，offset().top
- 思路分析：利用 offset().top 獲取到第三個版塊到頁面頂部的距離，然后使用scrollTop() 獲取到頁面卷上去的距離，判斷是否大于這個距離，大于就使用 fadein 淡入，否則就使用 fadeout 淡出
function block_hide(){
var three_top=$('.banner3').offset().top;
if($(document).scrollTop()>=three_top){
$('.map-box').fadeIn(700)
}else{
$('.map-box').fadeOut(700)
}
}2.3 點擊導(dǎo)航滾至對應(yīng)板塊 實現(xiàn)分析：
此版塊實現(xiàn)的是點擊導(dǎo)航滾動到對應(yīng)模塊的實現(xiàn)，代碼中標(biāo)記互斥鎖的地方先忽略，這是為了解決一些小 bug，互斥鎖在后面的分析中提及。
- 所需知識點：animate()，offset().top
- 思路分析：點擊后，排他思想，自己變色（添加了變化類current）兄弟不變色，使用 index() 方法獲取到點擊的導(dǎo)航的索引值，再將此索引值匹配到對應(yīng)的版塊上，得到其版塊的到頁面頂部的距離，執(zhí)行動畫函數(shù) animate 使頁面上卷這段距離即可
$('.map').click(function(){
flag=false; //互斥鎖節(jié)流閥
$(this).siblings().removeClass('current')
$(this).addClass('current')
var index=$(this).index();
distance=$('.banner-box').children().eq(index).offset().top+2;
// console.log(distance)
$('html').stop().animate({
'scrollTop':distance
},1000,'swing',function(){
flag=true; //互斥鎖節(jié)流閥
})
})2.4 頁面滾動導(dǎo)航對應(yīng)選擇實現(xiàn)分析：
此版塊解釋如何 滾動網(wǎng)頁至對應(yīng)板塊，讓導(dǎo)航也跟著選擇，一樣的是互斥鎖標(biāo)記先忽略
?? 重難點！??！
- 所需知識點：each()
- 思路分析：我們使用 each() 遍歷得到每一個版塊的索引 i 和其對應(yīng)版塊 ele，如果頁面卷上去的距離大于等于我們每一個遍歷得到的版塊元素的上邊界到頁面頂部的值，那么就說明當(dāng)前頁面滾動到了這個版塊，此時如果輸出i的話，若當(dāng)前在第四個版塊，則輸出結(jié)果為 0,1,2,3，這是因為滾動后會從索引0開始遍歷，直到遍歷到判斷語句不成立為止，但最后一個輸出的 i 一定是當(dāng)前版塊對應(yīng)的 i，我們使用 eq 方法匹配到 i 索引下的導(dǎo)航按鈕，使其變色選中，再把兄弟導(dǎo)航不選中即可實現(xiàn)
$(window).scroll(function(){
block_hide();
if(flag==true){
$('.banner-box').children().each(function(i,ele){
if($(document).scrollTop() >= $(ele).offset().top){
console.log(i);
$('.map').eq(i).addClass('current').siblings().removeClass('current');
}
})
}
})2.5 互斥鎖 實現(xiàn)分析：
互斥鎖是為了解決一個 bug，我們?nèi)绻粚懟コ怄i，點擊導(dǎo)航后，導(dǎo)航內(nèi)的選擇變色會把導(dǎo)航內(nèi)的所有按鈕都選一次再點到我們目標(biāo)點的按鈕，像抽風(fēng)了一樣
原因：就是點擊導(dǎo)航按鈕后頁面滾動，頁面滾動就會觸發(fā)滾動事件，就會在滾動途中把導(dǎo)航按鈕選擇一通再到目標(biāo)按鈕
解決方法：綜合以上標(biāo)記有互斥鎖的代碼我們可以發(fā)現(xiàn)，設(shè)置了一個 flag 變量初始為 true，只有 flag 為 true 才能滾動改變導(dǎo)航，但是一旦點擊導(dǎo)航，flag 就會變?yōu)?false，滾動切換導(dǎo)航便失效，從而達到目的，最后在點擊事件的動畫函數(shù)里添加回調(diào)函數(shù)，在點擊后將 flag 再賦值為 true 即可再次滾動改變導(dǎo)航
三：完整代碼
又到了大家最喜歡的源碼環(huán)節(jié)?。?！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./jquery.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
.banner-box{
box-sizing: border-box;
width: 1430px;
height: 3650px;
background-color: rgb(169, 169, 169);
padding: 15px;
}
.banner1{
box-sizing: border-box;
width: 1390px;
height: 380px;
background-color: rgb(167, 220, 255);
margin-bottom: 20px;
font-size: 60px;
font-weight: bold;
line-height: 375px;
text-align: center;
color: rgb(255, 255, 255);
text-shadow: 3px 3px 3px rgb(82, 82, 82);
}
.banner2{
box-sizing: border-box;
width: 1390px;
height: 380px;
background-color: rgb(255, 213, 213);
margin-bottom: 20px;
font-size: 60px;
font-weight: bold;
line-height: 375px;
text-align: center;
color: rgb(255, 255, 255);
text-shadow: 3px 3px 3px rgb(82, 82, 82);
}
.banner3{
box-sizing: border-box;
width: 1390px;
height: 380px;
background-color: rgb(207, 182, 255);
margin-bottom: 20px;
font-size: 60px;
font-weight: bold;
line-height: 375px;
text-align: center;
color: rgb(255, 255, 255);
text-shadow: 3px 3px 3px rgb(82, 82, 82);
}
.banner4{
box-sizing: border-box;
width: 1390px;
height: 380px;
background-color: rgb(255, 233, 195);
margin-bottom: 20px;
font-size: 60px;
font-weight: bold;
line-height: 375px;
text-align: center;
color: rgb(255, 255, 255);
text-shadow: 3px 3px 3px rgb(82, 82, 82);
}
.banner5{
box-sizing: border-box;
width: 1390px;
height: 380px;
background-color: rgb(171, 255, 255);
margin-bottom: 20px;
font-size: 60px;
font-weight: bold;
line-height: 375px;
text-align: center;
color: rgb(255, 255, 255);
text-shadow: 3px 3px 3px rgb(82, 82, 82);
}
.banner6{
box-sizing: border-box;
width: 1390px;
height: 380px;
background-color: rgb(242, 255, 175);
margin-bottom: 20px;
font-size: 60px;
font-weight: bold;
line-height: 375px;
text-align: center;
color: rgb(255, 255, 255);
text-shadow: 3px 3px 3px rgb(82, 82, 82);
}
.banner7{
box-sizing: border-box;
width: 1390px;
height: 380px;
background-color: rgb(255, 193, 233);
margin-bottom: 20px;
font-size: 60px;
font-weight: bold;
line-height: 375px;
text-align: center;
color: rgb(255, 255, 255);
text-shadow: 3px 3px 3px rgb(82, 82, 82);
}
.banner8{
box-sizing: border-box;
width: 1390px;
height: 380px;
background-color: rgb(193, 212, 255);
margin-bottom: 20px;
font-size: 60px;
font-weight: bold;
line-height: 375px;
text-align: center;
color: rgb(255, 255, 255);
text-shadow: 3px 3px 3px rgb(82, 82, 82);
}
.banner9{
box-sizing: border-box;
width: 1390px;
height: 380px;
background-color: rgb(255, 248, 193);
margin-bottom: 20px;
font-size: 60px;
font-weight: bold;
line-height: 375px;
text-align: center;
color: rgb(255, 255, 255);
text-shadow: 3px 3px 3px rgb(82, 82, 82);
}
.map-box{
position: fixed;
right: 30px;
top: 200px;
box-sizing: border-box;
width: 95px;
height: 370px;
display: none;
/* background-color: #fff; */
}
.map{
box-sizing: border-box;
float: left;
width: 93px;
height: 41px;
border-bottom: 1px solid rgb(147, 147, 147);
border-left: 10px solid rgb(147, 147, 147);
list-style: none;
text-align: center;
line-height: 40px;
background-color: rgb(255, 246, 237);
cursor: pointer;
color:rgb(87, 87, 87) ;
font-weight: bold;
font-size: 14px;
}
.map:hover{
color: rgb(56, 56, 56);
/* background-color: rgb(255, 220, 173); */
border-left: 10px solid rgb(255, 169, 31);
}
.current{
background:rgb(255, 220, 173);
}
</style>
</head>
<body>
<div class="banner-box">
<div class="banner1">版 塊 一</div>
<div class="banner2">版 塊 二</div>
<div class="banner3">版 塊 三</div>
<div class="banner4">版 塊 四</div>
<div class="banner5">版 塊 五</div>
<div class="banner6">版 塊 六</div>
<div class="banner7">版 塊 七</div>
<div class="banner8">版 塊 八</div>
<div class="banner9">版 塊 九</div>
</div>
<div class="map-box">
<ul>
<li class="map">版塊1</li>
<li class="map">版塊2</li>
<li class="map">版塊3</li>
<li class="map">版塊4</li>
<li class="map">版塊5</li>
<li class="map">版塊6</li>
<li class="map">版塊7</li>
<li class="map">版塊8</li>
<li class="map">版塊9</li>
</ul>
</div>
<script>
document.addEventListener('DOMContentLoaded',function(){
document.addEventListener('selectstart',function(event){
event.preventDefault();
})
document.addEventListener('contextmenu',function(event){
event.preventDefault();
})
})
var flag=true; //互斥鎖節(jié)流閥
block_hide();
$(window).scroll(function(){
block_hide();
if(flag==true){
$('.banner-box').children().each(function(i,ele){
if($(document).scrollTop() >= $(ele).offset().top){
console.log(i);
$('.map').eq(i).addClass('current').siblings().removeClass('current');
}
})
}
})
function block_hide(){
var three_top=$('.banner3').offset().top;
if($(document).scrollTop()>=three_top){
$('.map-box').fadeIn(700)
}else{
$('.map-box').fadeOut(700)
}
}
$('.map').click(function(){
flag=false; //互斥鎖節(jié)流閥
$(this).siblings().removeClass('current')
$(this).addClass('current')
var index=$(this).index();
distance=$('.banner-box').children().eq(index).offset().top+2;
// console.log(distance)
$('html').stop().animate({
'scrollTop':distance
},1000,'swing',function(){
flag=true; //互斥鎖節(jié)流閥
})
})
</script>
</body>
</html>到此這篇關(guān)于jQuery實現(xiàn)電梯導(dǎo)航案例(切換 網(wǎng)頁區(qū)域)的文章就介紹到這了,更多相關(guān)jquery電梯導(dǎo)航案例內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
背景顏色，比如換個心情之類的，需要記住這樣的一個狀態(tài)，下面為大家介紹下利用cookie記住背景顏色的具體實現(xiàn)，感興趣的朋友不要錯過2013-11-11
這篇文章主要介紹了jQuery滿屏焦點圖左右滾動特效，一段精致的焦點圖輪播代碼，有需要的小伙伴可以參考下。2015-09-09
Django中使用jquery的ajax進行數(shù)據(jù)交互的實例代碼
這篇文章主要介紹了Django中使用jquery的ajax進行數(shù)據(jù)交互的相關(guān)知識，非常不錯，具有參考借鑒價值 ,需要的朋友可以參考下2017-10-10
本文給大家介紹jQuery與Ajax以及序列化，涉及到ajax的優(yōu)勢，ajax的不足，序列化相關(guān)知識，本文介紹的非常詳細(xì)，具有參考借鑒價值感興趣的朋友一起學(xué)習(xí)吧2016-02-02
基于jquery的不規(guī)則矩形的排列實現(xiàn)代碼
現(xiàn)在很多網(wǎng)站都用不規(guī)則矩形來羅列圖片，ipad上面很多應(yīng)該用也都是用的不規(guī)則的矩形，但是還要讓他們各自都靠近排列，不能有空隙2012-04-04
在項目中遇到一個問題，本來以為是使用dropdownlist的效果的，仔細(xì)一看，其實是在點擊文本框以后，在其正下方彈出一個層，里邊有多個選項進行選擇。很像jQuery.datepicker 的效果。2009-10-10
這篇文章主要介紹了jQuery實現(xiàn)購物車計算價格功能的方法,實例分析了jQuery針對html元素的操作技巧,非常具有實用價值,需要的朋友可以參考下2015-03-03
jQuery實現(xiàn)的下雪動畫效果示例【附源碼下載】
這篇文章主要介紹了jQuery實現(xiàn)的下雪動畫效果,涉及jQuery插件結(jié)合setInterval、animate進行動畫操作的相關(guān)使用技巧,并附帶源碼供讀者下載參考,需要的朋友可以參考下2018-02-02
jQuery插件原來如此簡單 jQuery插件的機制及實戰(zhàn)
這種插件是將對象方法封裝起來，用于對通過選擇器獲取的jQuery對象進行操作，是最常見的一種插件2012-02-02
一直對stop的用法一知半解，今天抽點時間學(xué)習(xí)下jQuery stop()用法實例詳解的相關(guān)知識，特此分享腳本之家平臺，供大家參考2016-07-07