jQuery實(shí)現(xiàn)電梯導(dǎo)航案例詳解(切換?網(wǎng)頁(yè)區(qū)域)

更新時(shí)間：2022年05月11日 11:09:21 作者：卡卡西最近怎么樣

日常生活中用手機(jī)，電腦瀏覽網(wǎng)頁(yè)時(shí)，滑到了頁(yè)面下端后想返回頂部或跳轉(zhuǎn)到頁(yè)面別的版塊，用鼠標(biāo)滾動(dòng)很麻煩，網(wǎng)頁(yè)電梯導(dǎo)航就可以很方便的精準(zhǔn)到達(dá)目標(biāo)版塊，本文給大家分享jquery電梯導(dǎo)航案例詳解，感興趣的朋友一起看看吧

2.1 網(wǎng)頁(yè)結(jié)構(gòu)：
2.2 顯示隱藏函數(shù) 實(shí)現(xiàn)分析：
2.3 點(diǎn)擊導(dǎo)航滾至對(duì)應(yīng)板塊實(shí)現(xiàn)分析：
2.4 頁(yè)面滾動(dòng)導(dǎo)航對(duì)應(yīng)選擇實(shí)現(xiàn)分析：
2.5 互斥鎖實(shí)現(xiàn)分析：

三：完整代碼

前言：

日常生活中用手機(jī)，電腦瀏覽網(wǎng)頁(yè)時(shí)，滑到了頁(yè)面下端后想返回頂部或跳轉(zhuǎn)到頁(yè)面別的版塊，用鼠標(biāo)滾動(dòng)很麻煩，網(wǎng)頁(yè)電梯導(dǎo)航 就可以很方便的精準(zhǔn)到達(dá)目標(biāo)版塊。

一：效果展示

【gif 動(dòng)圖演示】格式轉(zhuǎn)換有些不清晰請(qǐng)諒解！功能實(shí)現(xiàn)包含以下：

點(diǎn)擊電梯導(dǎo)航切換到對(duì)應(yīng)板塊
移動(dòng)光標(biāo)導(dǎo)航欄對(duì)應(yīng)板塊跟著移動(dòng)

二：實(shí)現(xiàn)原理剖析

重點(diǎn)來(lái)啦?。。?/p>

2.1 網(wǎng)頁(yè)結(jié)構(gòu)：

結(jié)構(gòu)上分了兩部分，一部分是網(wǎng)頁(yè)版塊 banner-box，另一部分是網(wǎng)頁(yè)導(dǎo)航版塊 map-box，用了固定定位定在了右側(cè)，打開(kāi)頁(yè)面是不顯示的，要滾動(dòng)至第三個(gè)版塊后才會(huì)顯示導(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ù) 實(shí)現(xiàn)分析：

此塊顯示隱藏的代碼封裝在了一個(gè)單獨(dú)的函數(shù)內(nèi)，這是為了解決一個(gè) bug 而方便調(diào)用，當(dāng)代碼移動(dòng)到第三個(gè)板塊往后時(shí)，刷新頁(yè)面，此時(shí)雖然頁(yè)面在第三個(gè)版塊后，但是導(dǎo)航缺沒(méi)有顯示，這就需要單獨(dú)寫個(gè)函數(shù)方便調(diào)用 ----- 打開(kāi)頁(yè)面就調(diào)用一次

所需知識(shí)點(diǎn)：scrollTop()，offset().top
思路分析：利用 offset().top 獲取到第三個(gè)版塊到頁(yè)面頂部的距離，然后使用scrollTop() 獲取到頁(yè)面卷上去的距離，判斷是否大于這個(gè)距離，大于就使用 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 點(diǎn)擊導(dǎo)航滾至對(duì)應(yīng)板塊實(shí)現(xiàn)分析：

此版塊實(shí)現(xiàn)的是點(diǎn)擊導(dǎo)航滾動(dòng)到對(duì)應(yīng)模塊的實(shí)現(xiàn)，代碼中標(biāo)記互斥鎖的地方先忽略，這是為了解決一些小 bug，互斥鎖在后面的分析中提及。

所需知識(shí)點(diǎn)：animate()，offset().top
思路分析：點(diǎn)擊后，排他思想，自己變色（添加了變化類current）兄弟不變色，使用 index() 方法獲取到點(diǎn)擊的導(dǎo)航的索引值，再將此索引值匹配到對(duì)應(yīng)的版塊上，得到其版塊的到頁(yè)面頂部的距離，執(zhí)行動(dòng)畫函數(shù) animate 使頁(yè)面上卷這段距離即可

$('.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 頁(yè)面滾動(dòng)導(dǎo)航對(duì)應(yīng)選擇實(shí)現(xiàn)分析：

此版塊解釋如何滾動(dòng)網(wǎng)頁(yè)至對(duì)應(yīng)板塊，讓導(dǎo)航也跟著選擇，一樣的是互斥鎖標(biāo)記先忽略

?? 重難點(diǎn)?。?！

所需知識(shí)點(diǎn)：each()
思路分析：我們使用 each() 遍歷得到每一個(gè)版塊的索引 i 和其對(duì)應(yīng)版塊 ele，如果頁(yè)面卷上去的距離大于等于我們每一個(gè)遍歷得到的版塊元素的上邊界到頁(yè)面頂部的值，那么就說(shuō)明當(dāng)前頁(yè)面滾動(dòng)到了這個(gè)版塊，此時(shí)如果輸出i的話，若當(dāng)前在第四個(gè)版塊，則輸出結(jié)果為 0,1,2,3，這是因?yàn)闈L動(dòng)后會(huì)從索引0開(kāi)始遍歷，直到遍歷到判斷語(yǔ)句不成立為止，但最后一個(gè)輸出的 i 一定是當(dāng)前版塊對(duì)應(yīng)的 i，我們使用 eq 方法匹配到 i 索引下的導(dǎo)航按鈕，使其變色選中，再把兄弟導(dǎo)航不選中即可實(shí)現(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 互斥鎖實(shí)現(xiàn)分析：

互斥鎖是為了解決一個(gè) bug，我們?nèi)绻粚懟コ怄i，點(diǎn)擊導(dǎo)航后，導(dǎo)航內(nèi)的選擇變色會(huì)把導(dǎo)航內(nèi)的所有按鈕都選一次再點(diǎn)到我們目標(biāo)點(diǎn)的按鈕，像抽風(fēng)了一樣

原因：就是點(diǎn)擊導(dǎo)航按鈕后頁(yè)面滾動(dòng)，頁(yè)面滾動(dòng)就會(huì)觸發(fā)滾動(dòng)事件，就會(huì)在滾動(dòng)途中把導(dǎo)航按鈕選擇一通再到目標(biāo)按鈕

解決方法：綜合以上標(biāo)記有互斥鎖的代碼我們可以發(fā)現(xiàn)，設(shè)置了一個(gè) flag 變量初始為 true，只有 flag 為 true 才能滾動(dòng)改變導(dǎo)航，但是一旦點(diǎn)擊導(dǎo)航，flag 就會(huì)變?yōu)?false，滾動(dòng)切換導(dǎo)航便失效，從而達(dá)到目的，最后在點(diǎn)擊事件的動(dòng)畫函數(shù)里添加回調(diào)函數(shù)，在點(diǎn)擊后將 flag 再賦值為 true 即可再次滾動(dòng)改變導(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實(shí)現(xiàn)電梯導(dǎo)航案例(切換網(wǎng)頁(yè)區(qū)域)的文章就介紹到這了,更多相關(guān)jquery電梯導(dǎo)航案例內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: