jQuery實現電梯導航案例詳解(切換?網頁區(qū)域)
更新時間：2022年05月11日 11:09:21 作者：卡卡西最近怎么樣
日常生活中用手機，電腦瀏覽網頁時，滑到了頁面下端后想返回頂部 或 跳轉到頁面別的版塊，用鼠標滾動很麻煩，網頁電梯導航就可以很方便的精準到達目標版塊，本文給大家分享jquery電梯導航案例詳解，感興趣的朋友一起看看吧
前言：
日常生活中用手機，電腦瀏覽網頁時，滑到了頁面下端后想返回頂部 或 跳轉到頁面別的版塊，用鼠標滾動很麻煩，網頁電梯導航 就可以很方便的精準到達目標版塊。
一：效果展示
【gif 動圖演示】格式轉換有些不清晰請諒解！功能實現包含以下：
- 點擊電梯導航切換到對應板塊
- 移動光標導航欄對應板塊跟著移動
二：實現原理剖析
重點來啦?。。?/p>
2.1 網頁結構：
結構上分了兩部分，一部分是網頁版塊 banner-box，另一部分是網頁導航版塊 map-box，用了固定定位定在了右側，打開頁面是不顯示的，要滾動至第三個版塊后才會顯示導航
<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 顯示隱藏函數 實現分析：
此塊顯示隱藏的代碼封裝在了一個單獨的函數內，這是為了解決一個 bug 而方便調用，當代碼移動到第三個板塊往后時，刷新頁面，此時雖然頁面在第三個版塊后，但是導航缺沒有顯示，這就需要單獨寫個函數方便調用 ----- 打開頁面就調用一次
- 所需知識點：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 點擊導航滾至對應板塊 實現分析：
此版塊實現的是點擊導航滾動到對應模塊的實現，代碼中標記互斥鎖的地方先忽略，這是為了解決一些小 bug，互斥鎖在后面的分析中提及。
- 所需知識點：animate()，offset().top
- 思路分析：點擊后，排他思想，自己變色（添加了變化類current）兄弟不變色，使用 index() 方法獲取到點擊的導航的索引值，再將此索引值匹配到對應的版塊上，得到其版塊的到頁面頂部的距離，執(zhí)行動畫函數 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 頁面滾動導航對應選擇實現分析：
此版塊解釋如何 滾動網頁至對應板塊，讓導航也跟著選擇，一樣的是互斥鎖標記先忽略
?? 重難點?。。?/p>
- 所需知識點：each()
- 思路分析：我們使用 each() 遍歷得到每一個版塊的索引 i 和其對應版塊 ele，如果頁面卷上去的距離大于等于我們每一個遍歷得到的版塊元素的上邊界到頁面頂部的值，那么就說明當前頁面滾動到了這個版塊，此時如果輸出i的話，若當前在第四個版塊，則輸出結果為 0,1,2,3，這是因為滾動后會從索引0開始遍歷，直到遍歷到判斷語句不成立為止，但最后一個輸出的 i 一定是當前版塊對應的 i，我們使用 eq 方法匹配到 i 索引下的導航按鈕，使其變色選中，再把兄弟導航不選中即可實現
$(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 互斥鎖 實現分析：
互斥鎖是為了解決一個 bug，我們如果不寫互斥鎖，點擊導航后，導航內的選擇變色會把導航內的所有按鈕都選一次再點到我們目標點的按鈕，像抽風了一樣
原因：就是點擊導航按鈕后頁面滾動，頁面滾動就會觸發(fā)滾動事件，就會在滾動途中把導航按鈕選擇一通再到目標按鈕
解決方法：綜合以上標記有互斥鎖的代碼我們可以發(fā)現，設置了一個 flag 變量初始為 true，只有 flag 為 true 才能滾動改變導航，但是一旦點擊導航，flag 就會變?yōu)?false，滾動切換導航便失效，從而達到目的，最后在點擊事件的動畫函數里添加回調函數，在點擊后將 flag 再賦值為 true 即可再次滾動改變導航
三：完整代碼
又到了大家最喜歡的源碼環(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>到此這篇關于jQuery實現電梯導航案例(切換 網頁區(qū)域)的文章就介紹到這了,更多相關jquery電梯導航案例內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要為大家詳細介紹了最常見的左側分類菜單欄jQuery實現代碼,仿京東、淘寶等各大類網站效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
jQuery Validation實例代碼 讓驗證變得如此容易
眾所周知，Jquery以其簡潔性讓無數人為之瘋狂。現在我要像大家介紹一個jQuery Validation，一看到Validation大家肯定第一直觀感覺就是這肯定是一個驗證框架，沒有錯，本文就是基于jQuery Validation展開討論。2010-10-10
這篇文章主要為大家詳細介紹了jquery實現表格行拖動排序，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-02-02
這篇文章主要給大家介紹了關于如何利用jqgrid實現上移下移單元格功能的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2018-11-11
jQuery ajax 跨域插件jquery.xdomainrequest.min.js的使用方法
jQuery XDomainRequest 是一個利用 XDomainRequest 對象為 IE8、IE9 實現跨域資源共享（CORS - Cross Origin Resource Sharing）的 jQuery 插件2023-06-06
老生常談jquery中detach()和remove()的區(qū)別
下面小編就為大家?guī)硪黄仙Ｕ刯query中detach()和remove()的區(qū)別。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03
這篇文章主要為大家詳細介紹了jquery事件綁定解綁機制源碼，感興趣的小伙伴們可以參考一下2016-09-09
瀏覽器端跨域訪問一直是個問題, 多數研發(fā)人員對待js的態(tài)度都是好了傷疤忘了疼,所以病發(fā)的時候,時不時地都要疼上一疼.記得很久以前使用iframe 加script domain 聲明,yahoo js util 的方式解決二級域名跨域訪問的問題.2009-12-12
本篇文章主要介紹了jquery中each循環(huán)的簡單回滾操作的相關知識，具有很好的參考價值。下面跟著小編一起來看下吧2017-05-05
jQuery星星評分制作5顆星星鼠標滑過評分打分效果，可取消評分結果，重新打分。下面通過代碼給大家講解的非常詳細，需要的的朋友參考下2019-11-11