您好,登錄后才能下訂單哦!
這篇文章將為大家詳細(xì)講解有關(guān)JavaScript如何制作樓層導(dǎo)航效果,小編覺得挺實(shí)用的,因此分享給大家做個(gè)參考,希望大家閱讀完這篇文章后可以有所收獲。
<div id="box" class="box"> <ul class="list"> <li class="content-part" data-n="欄目一">欄目一</li> <li class="content-part" data-n="欄目二">欄目二</li> <li class="content-part" data-n="欄目三">欄目三</li> <li class="content-part" data-n="欄目四">欄目四</li> <li class="content-part" data-n="欄目五">欄目五</li> </ul> </div> <div class="left"> <ul id="left-list"> <li data-n="欄目一">欄目一</li> <li data-n="欄目二">欄目二</li> <li data-n="欄目三">欄目三</li> <li data-n="欄目四">欄目四</li> <li data-n="欄目五">欄目五</li> </ul> </div>
<style> * { margin: 0; padding: 0; } body .box { width: 1200px; } body .box { margin: 0 auto; } ul { list-style: none; } body .box ul li { height: 800px; background-color: silver; margin-bottom: 20px; font-size: 30px; font-weight: bold; } body .left { position: fixed; left: 20px; bottom: 100px; width: 100px; height: 250px; top: 50%; margin-top: -125px; background-color: silver; } body .left ul li { height: 50px; line-height: 50px; text-align: center; cursor: pointer; } body .current { color: #fff; background-color: tomato; } </style>
點(diǎn)擊左側(cè)菜單中的樓層按鈕對應(yīng)跳轉(zhuǎn)到相應(yīng)的樓層。
var oList = document.getElementById('left-list'); // 點(diǎn)擊事件委托 oList.onclick = function (e) { if (e.target.tagName.toLowerCase() == 'li') { // 取data-n值 var n = e.target.getAttribute('data-n'); // []屬性選擇器 var contentPart = document.querySelector('.content-part[data-n=' + n + ']'); // 設(shè)置卷動 document.documentElement.scrollTop = contentPart.offsetTop; } }
樓層監(jiān)聽,頁面卷動時(shí),左側(cè)菜單中的樓層欄目背景隨之變化。
// 頁面卷動時(shí),左側(cè)盒子欄目背景隨之變化 var contents = document.querySelectorAll('.content-part'); var lis = document.querySelectorAll('#left-list li'); var offsetTopArr = []; for (var i = 0; i < contents.length; i++) { offsetTopArr.push(contents[i].offsetTop); } // 為了方便比較,追加無窮大 offsetTopArr.push(Infinity); // 監(jiān)聽卷動 var nowFloor = -1; window.onscroll = function (e) { var nowScrollTop = document.documentElement.scrollTop; // break的i值即為盒子數(shù)組下標(biāo) for (var i = 0; i < offsetTopArr.length; i++) { if (nowScrollTop >= offsetTopArr[i] && nowScrollTop < offsetTopArr[i + 1]) { break; } } // 樓層不等,進(jìn)行樣式更改 if (nowFloor != i) { nowFloor = i; for (var j = 0; j < lis.length; j++) { if (j == i) { // 當(dāng)前樓層添加樣式 lis[j].className = 'current'; } else { // 去掉其他樓層的樣式 lis[j].className = ''; } } } }
關(guān)于“JavaScript如何制作樓層導(dǎo)航效果”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,使各位可以學(xué)到更多知識,如果覺得文章不錯(cuò),請把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。