如何用JavaScript实现楼层效果

本篇内容介绍了"如何用JavaScript实现楼层效果"的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

* {            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;        }

 
        
我是第1层
        
我是第2层
        
我是第3层
        
我是第4层
        
我是第5层
    
     
        
第1层
        
第2层
        
第3层
        
第4层
        
第5层

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.实现点击谁就选中谁        let oItems = document.querySelectorAll("ol>li");        let currentItem = oItems[0];         // 获取可视区域的高度        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;                // 实现滚动                // window.scrollTo(0, i * screenHeight);                // 注意点: 通过documentElement.scrollTop来实现网页滚动, 在设置值的时候不能添加单位                // 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            }        }

"如何用JavaScript实现楼层效果"的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注网站，小编将为大家输出更多高质量的实用文章！