JavaScript實現(xiàn)樓層效果
更新時間:2021年11月07日 13:40:44 作者:小白小白從不日白
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)樓層效果,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了JavaScript實現(xiàn)樓層效果的具體代碼,供大家參考,具體內(nèi)容如下
* { margin: 0; padding: 0; } html, body { width: 100%; height: 100%; } ul { width: 100%; height: 100%; } ul>li { list-style: none; width: 100%; height: 100%; font-size: 100px; text-align: center; } ol { position: fixed; left: 10px; top: 50%; transform: translateY(-50%); } ol>li { list-style: none; width: 100px; line-height: 40px; text-align: center; border: 1px solid #000; } .selected { background: skyblue; }
<ul> <li>我是第1層</li> <li>我是第2層</li> <li>我是第3層</li> <li>我是第4層</li> <li>我是第5層</li> </ul> <ol> <li class="selected">第1層</li> <li>第2層</li> <li>第3層</li> <li>第4層</li> <li>第5層</li> </ol>
js:
// 1.初始化樓層的顏色 let oPages = document.querySelectorAll("ul>li"); let colorArr = ['green', 'blue', 'purple', 'red', 'yellow']; for (let i = 0; i < oPages.length; i++) { let page = oPages[i]; page.style.background = colorArr[i]; } // 2.實現(xiàn)點擊誰就選中誰 let oItems = document.querySelectorAll("ol>li"); let currentItem = oItems[0]; // 獲取可視區(qū)域的高度 let screenHeight = getScreen().height; let timerId = null; for (let i = 0; i < oItems.length; i++) { let item = oItems[i]; item.onclick = function() { currentItem.className = ""; this.className = "selected"; currentItem = this; // 實現(xiàn)滾動 // window.scrollTo(0, i * screenHeight); // 注意點: 通過documentElement.scrollTop來實現(xiàn)網(wǎng)頁滾動, 在設(shè)置值的時候不能添加單位 // document.documentElement.scrollTop = i * screenHeight + "px"; // document.documentElement.scrollTop = i * screenHeight; clearInterval(timerId); timerId = setInterval(function() { let begin = document.documentElement.scrollTop; let target = i * screenHeight; let step = (target - begin) * 0.2; begin += step; if (Math.abs(Math.floor(step)) <= 1) { clearInterval(timerId); document.documentElement.scrollTop = i * screenHeight; return; } document.documentElement.scrollTop = begin; }, 50); } } //獲取瀏覽器視口寬高 function getScreen() { let width, height; if (window.innerWidth) { width = window.innerWidth; height = window.innerHeight; } else if (document.compatMode === "BackCompat") { width = document.body.clientWidth; height = document.body.clientHeight; } else { width = document.documentElement.clientWidth; height = document.documentElement.clientHeight; } return { width: width, height: height } }
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript中push(),join() 函數(shù) 實例詳解
本文通過實例給大家介紹了JavaScript中push(),join() 的知識,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2016-09-094種JavaScript實現(xiàn)簡單tab選項卡切換的方法
這篇文章主要介紹了4種JavaScript實現(xiàn)簡單tab選項卡切換的方法,感興趣的小伙伴們可以參考一下2016-01-01javascript設(shè)計模式 – 建造者模式原理與應(yīng)用實例分析
這篇文章主要介紹了javascript設(shè)計模式 – 建造者模式,結(jié)合實例形式分析了javascript建造者模式相關(guān)概念、原理、應(yīng)用場景及操作注意事項,需要的朋友可以參考下2020-04-04網(wǎng)頁前端登錄js按Enter回車鍵實現(xiàn)登陸的兩種方法
下面小編就為大家?guī)硪黄W(wǎng)頁前端登錄js按Enter回車鍵實現(xiàn)登陸的兩種方法。小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考2016-05-05一個多瀏覽器支持的背景變暗的div并可拖動提示窗口功能的代碼
兼容IE、Firefox、Opera前幾天在網(wǎng)上找了許多資料,看了不少兄弟的源碼,一直找不到合適的,要不就是拖動有問題,要不就是不兼容Firefox,所以自已寫了一個,下面是代碼:2008-04-04