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

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() 函數(shù) 實例詳解

    本文通過實例給大家介紹了JavaScript中push(),join() 的知識,非常不錯,具有參考借鑒價值,需要的朋友可以參考下
    2016-09-09
  • ES6中class類用法實例淺析

    ES6中class類用法實例淺析

    這篇文章主要介紹了ES6中class類用法,結(jié)合實例形式分析了ES6中類的實現(xiàn)方法與相關(guān)語法使用技巧,需要的朋友可以參考下
    2017-04-04
  • JavaScript的Proxy可以做哪些有意思的事兒

    JavaScript的Proxy可以做哪些有意思的事兒

    這篇文章主要介紹了JavaScript的Proxy可以做哪些有意思的事兒,Proxy是ES6中提供的新的API,可以用來定義對象各種基本操作的自定義行為 (在文檔中被稱為traps,我覺得可以理解為一個針對對象各種行為的鉤子),,需要的朋友可以參考下
    2019-06-06
  • 4種JavaScript實現(xiàn)簡單tab選項卡切換的方法

    4種JavaScript實現(xiàn)簡單tab選項卡切換的方法

    這篇文章主要介紹了4種JavaScript實現(xiàn)簡單tab選項卡切換的方法,感興趣的小伙伴們可以參考一下
    2016-01-01
  • 微信小程序中weui用法解析

    微信小程序中weui用法解析

    這篇文章主要介紹了微信小程序中weui用法解析,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
    2019-10-10
  • JS實現(xiàn)選項卡實例詳解

    JS實現(xiàn)選項卡實例詳解

    這篇文章主要介紹了JS實現(xiàn)選項卡的方法,結(jié)合實例形式詳細講述了JavaScript實現(xiàn)選項卡的布局與功能實現(xiàn)的完整步驟及相關(guān)技巧,需要的朋友可以參考下
    2015-11-11
  • javascript設(shè)計模式 – 建造者模式原理與應(yīng)用實例分析

    javascript設(shè)計模式 – 建造者模式原理與應(yīng)用實例分析

    這篇文章主要介紹了javascript設(shè)計模式 – 建造者模式,結(jié)合實例形式分析了javascript建造者模式相關(guān)概念、原理、應(yīng)用場景及操作注意事項,需要的朋友可以參考下
    2020-04-04
  • 網(wǎng)頁前端登錄js按Enter回車鍵實現(xiàn)登陸的兩種方法

    網(wǎng)頁前端登錄js按Enter回車鍵實現(xiàn)登陸的兩種方法

    下面小編就為大家?guī)硪黄W(wǎng)頁前端登錄js按Enter回車鍵實現(xiàn)登陸的兩種方法。小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考
    2016-05-05
  • 一個多瀏覽器支持的背景變暗的div并可拖動提示窗口功能的代碼

    一個多瀏覽器支持的背景變暗的div并可拖動提示窗口功能的代碼

    兼容IE、Firefox、Opera前幾天在網(wǎng)上找了許多資料,看了不少兄弟的源碼,一直找不到合適的,要不就是拖動有問題,要不就是不兼容Firefox,所以自已寫了一個,下面是代碼:
    2008-04-04
  • 用js讀寫cookie的簡單方法(推薦)

    用js讀寫cookie的簡單方法(推薦)

    下面小編就為大家?guī)硪黄胘s讀寫cookie的簡單方法(推薦)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2016-08-08

最新評論