jQuery實(shí)現(xiàn)電梯導(dǎo)航案例詳解(切換?網(wǎng)頁區(qū)域)
前言:
日常生活中用手機(jī),電腦瀏覽網(wǎng)頁時(shí),滑到了頁面下端后想返回頂部 或 跳轉(zhuǎn)到頁面別的版塊,用鼠標(biāo)滾動(dòng)很麻煩,網(wǎng)頁電梯導(dǎo)航 就可以很方便的精準(zhǔn)到達(dá)目標(biāo)版塊。
一:效果展示
【gif 動(dòng)圖演示】格式轉(zhuǎn)換有些不清晰請諒解!功能實(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)來啦?。。?/p>
2.1 網(wǎng)頁結(jié)構(gòu):
結(jié)構(gòu)上分了兩部分,一部分是網(wǎng)頁版塊 banner-box,另一部分是網(wǎng)頁導(dǎo)航版塊 map-box,用了固定定位定在了右側(cè),打開頁面是不顯示的,要滾動(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í),刷新頁面,此時(shí)雖然頁面在第三個(gè)版塊后,但是導(dǎo)航缺沒有顯示,這就需要單獨(dú)寫個(gè)函數(shù)方便調(diào)用 ----- 打開頁面就調(diào)用一次
- 所需知識(shí)點(diǎn):scrollTop(),offset().top
- 思路分析:利用 offset().top 獲取到第三個(gè)版塊到頁面頂部的距離,然后使用scrollTop() 獲取到頁面卷上去的距離,判斷是否大于這個(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)的版塊上,得到其版塊的到頁面頂部的距離,執(zhí)行動(dòng)畫函數(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òng)導(dǎo)航對(duì)應(yīng)選擇實(shí)現(xiàn)分析:
此版塊解釋如何 滾動(dòng)網(wǎng)頁至對(duì)應(yīng)板塊,讓導(dǎo)航也跟著選擇,一樣的是互斥鎖標(biāo)記先忽略
?? 重難點(diǎn)?。?!
- 所需知識(shí)點(diǎn):each()
- 思路分析:我們使用 each() 遍歷得到每一個(gè)版塊的索引 i 和其對(duì)應(yīng)版塊 ele,如果頁面卷上去的距離大于等于我們每一個(gè)遍歷得到的版塊元素的上邊界到頁面頂部的值,那么就說明當(dāng)前頁面滾動(dòng)到了這個(gè)版塊,此時(shí)如果輸出i的話,若當(dāng)前在第四個(gè)版塊,則輸出結(jié)果為 0,1,2,3,這是因?yàn)闈L動(dòng)后會(huì)從索引0開始遍歷,直到遍歷到判斷語句不成立為止,但最后一個(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)航按鈕后頁面滾動(dòng),頁面滾動(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)頁區(qū)域)的文章就介紹到這了,更多相關(guān)jquery電梯導(dǎo)航案例內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
最常見的左側(cè)分類菜單欄jQuery實(shí)現(xiàn)代碼
這篇文章主要為大家詳細(xì)介紹了最常見的左側(cè)分類菜單欄jQuery實(shí)現(xiàn)代碼,仿京東、淘寶等各大類網(wǎng)站效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-11-11jQuery Validation實(shí)例代碼 讓驗(yàn)證變得如此容易
眾所周知,Jquery以其簡潔性讓無數(shù)人為之瘋狂。現(xiàn)在我要像大家介紹一個(gè)jQuery Validation,一看到Validation大家肯定第一直觀感覺就是這肯定是一個(gè)驗(yàn)證框架,沒有錯(cuò),本文就是基于jQuery Validation展開討論。2010-10-10jquery實(shí)現(xiàn)表格行拖動(dòng)排序
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)表格行拖動(dòng)排序,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-02-02利用jqgrid實(shí)現(xiàn)上移下移單元格功能
這篇文章主要給大家介紹了關(guān)于如何利用jqgrid實(shí)現(xiàn)上移下移單元格功能的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-11-11jQuery ajax 跨域插件jquery.xdomainrequest.min.js的使用方法
jQuery XDomainRequest 是一個(gè)利用 XDomainRequest 對(duì)象為 IE8、IE9 實(shí)現(xiàn)跨域資源共享(CORS - Cross Origin Resource Sharing)的 jQuery 插件2023-06-06老生常談jquery中detach()和remove()的區(qū)別
下面小編就為大家?guī)硪黄仙U刯query中detach()和remove()的區(qū)別。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-03-03jQuery實(shí)現(xiàn)滑動(dòng)星星評(píng)分效果(每日分享)
jQuery星星評(píng)分制作5顆星星鼠標(biāo)滑過評(píng)分打分效果,可取消評(píng)分結(jié)果,重新打分。下面通過代碼給大家講解的非常詳細(xì),需要的的朋友參考下2019-11-11