原生JS教你如何实现JQ的全屏滚动

2023-10-04 09:51:04
原生JS实现JQ的效果

前言: 原本我是想仿原神官网做的，但是发现原神终究是原神，代码抄不来，所以我就打算自己做，实现的方式很简单
源代码如下:
<!DOCTYPE html>
<html lang="zh">

<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>滑动测试</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            box-sizing: border-box;
        }

        .box {
            position: relative;
            width: 100%;
            height: 100vh;
            overflow: hidden;
        }

        #list {
            position: absolute;
            top: 0;
            z-index: 2;
        }

        .active {
            color: wheat;
        }

        #box_ul {
            position: relative;
            top: 0;
            transition: 0.5s ease;
        }

        #box_ul li {
            width: 100%;
            height: 100vh;
            font-size: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        #box_ul li:nth-child(1) {
            background-color: rgb(0, 159, 170);
        }

        #box_ul li:nth-child(2) {
            background-color: rgb(0, 113, 158);
        }

        #box_ul li:nth-child(3) {
            background-color: rgb(0, 217, 224);
        }

        #box_ul li:nth-child(4) {
            background-color: rgb(160, 255, 157);
        }
    </style>
</head>

<body>

    <div class="box">
        <ul id="box_ul">
            <li>一页面</li>
            <li>二页面</li>
            <li>三页面</li>
            <li>四页面</li>
        </ul>
    </div>
    <ul id="list">
        <li id="l1" class="active">1</li>
        <li id="l2">2</li>
        <li id="l3">3</li>
        <li id="l4">4</li>
    </ul>
    <script>
        var start = true, i = 0;
        var box = document.getElementsByTagName("ul")[0];
        document.addEventListener('mousewheel', function (ev) {
            var ev = window.event || ev;
            if (start) {
                start = false;
                if (ev.wheelDelta < 0 && i < 3) {
                    i++;
                    if (i == 1) {
                        document.getElementById("l1").classList.remove("active");
                        document.getElementById("l2").classList.add("active");
                    }
                    else if (i == 2) {
                        document.getElementById("l2").classList.remove("active");
                        document.getElementById("l3").classList.add("active");
                    }
                    else if (i == 3) {
                        document.getElementById("l3").classList.remove("active");
                        document.getElementById("l4").classList.add("active");
                    }
                }
                if (ev.wheelDelta > 0 && i > 0) {
                    i--;
                    if (i == 0) {
                        document.getElementById("l2").classList.remove("active");
                        document.getElementById("l1").classList.add("active");
                    }
                    else if (i == 2) {
                        document.getElementById("l4").classList.remove("active");
                        document.getElementById("l3").classList.add("active");
                    }
                    else if (i == 1) {
                        document.getElementById("l3").classList.remove("active");
                        document.getElementById("l2").classList.add("active");
                    }
                }
                setTimeout(function () {
                    box.style.top = -i * 100 + 'vh';
                }, 0);
                setTimeout(function () {
                    start = true;
                }, 1000);
            }
        });
    </script>
</body>

</html>
直接复制即可，最后原创不易，还请点赞关注支持一下博主
码农公寓

原生JS实现JQ的效果

相关文章
