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

前言：

日常生活中用手機，電腦瀏覽網(wǎng)頁時，滑到了頁面下端后想返回頂部或跳轉(zhuǎn)到頁面別的版塊，用鼠標(biāo)滾動很麻煩，網(wǎng)頁電梯導(dǎo)航 就可以很方便的精準(zhǔn)到達(dá)目標(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)記先忽略

?? 重難點?。。?/p>

所需知識點：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)航便失效，從而達(dá)到目的，最后在點擊事件的動畫函數(shù)里添加回調(diào)函數(shù)，在點擊后將 flag 再賦值為 true 即可再次滾動改變導(dǎo)航

三：完整代碼

又到了大家最喜歡的源碼環(huán)節(jié)！?。?/p>

<!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)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

軟件下載

源碼下載

軟件編程

網(wǎng)絡(luò)編程

在線工具

數(shù)據(jù)庫

CMS

常用工具

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

目錄

前言：

一：效果展示

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

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

2.2 顯示隱藏函數(shù) 實現(xiàn)分析：

2.3 點擊導(dǎo)航滾至對應(yīng)板塊實現(xiàn)分析：

2.4 頁面滾動導(dǎo)航對應(yīng)選擇實現(xiàn)分析：

2.5 互斥鎖實現(xiàn)分析：

三：完整代碼

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

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

目錄

前言：

一：效果展示

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

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

2.2 顯示隱藏函數(shù) 實現(xiàn)分析：

2.3 點擊導(dǎo)航滾至對應(yīng)板塊 實現(xiàn)分析：

2.4 頁面滾動導(dǎo)航對應(yīng)選擇實現(xiàn)分析：

2.5 互斥鎖 實現(xiàn)分析：

三：完整代碼

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具

2.3 點擊導(dǎo)航滾至對應(yīng)板塊實現(xiàn)分析：

2.5 互斥鎖實現(xiàn)分析：