現在滾滾屏的效果幾乎到處可見，下面我也來記錄一組簡單的滾滾屏效果，頁面中，我只簡單的添加了一個小動畫。

頁面結構：

<div class="container" id="container">
    <div id="box">
        <div class="con" id="one" style="z-index: 3">
            <div class="test">

            </div>
        </div>
        <div class="con"
 
 id="two">
            <div class="test">

            </div>
        </div>
        <div class="con" id="three">
            <div class="test">

            </div>
        </div>
    </div>
    <ol id="list" class="list">

    </ol>
</div>
 

樣式 :

<style>
        * {
            margin: 0px;;
            padding: 0px;
            list-style: none;
        }

        html, body {
            width: 100%;
            height: 100%;
            background-color: purple;
        }

        .container {
            width: 100%;
            height
 
: 100%;
            position: relative;
            left: 0px;
            top: 0px;
            left: 0px;
            top: 0px;
        }

        .con {
            width: 100%;
            height: 100%;
            position: absolute;

        }

        .con .test {
            width: 100px;
            height: 100px;
            background-color: deeppink;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-top: -50px;
            margin-left: -50px;
        }

        .con.active {
            transition: all 2s;
        }

        .con.active .test {
            animation: anim 2s;
        }

        @-webkit-keyframes anim {
            0% {
                -webkit-transform: translateX(50px) scale(1.2));
                -moz-transform: translateX(50px) scale(1.2);
                -ms-transform: translateX(50px) scale(1.2);
                -o-transform: translateX(50px) scale(1.2);
                transform: translateX(50px) scale(1.2);
            }
            50% {
                -webkit-transform: translateX(0px) scale(.8);
                -moz-transform: translateX(0px) scale(.8);
                -ms-transform: translateX(0px) scale(.8);
                -o-transform: translateX(0px) scale(.8);
                transform: translateX(0px) scale(.8);
            }
            100% {
                -webkit-transform: translateX(-50px);
                -moz-transform: translateX(-50px);
                -ms-transform: translateX(-50px);
                -o-transform: translateX(-50px);
                transform: translateX(-50px);
            }
        }

        @keyframes anim {
            0% {
                -webkit-transform: translateX(50px) scale(1.2));
                -moz-transform: translateX(50px) scale(1.2);
                -ms-transform: translateX(50px) scale(1.2);
                -o-transform: translateX(50px) scale(1.2);
                transform: translateX(50px) scale(1.2);
            }
            50% {
                -webkit-transform: translateX(0px) scale(.8);
                -moz-transform: translateX(0px) scale(.8);
                -ms-transform: translateX(0px) scale(.8);
                -o-transform: translateX(0px) scale(.8);
                transform: translateX(0px) scale(.8);
            }
            100% {
                -webkit-transform: translateX(-50px);
                -moz-transform: translateX(-50px);
                -ms-transform: translateX(-50px);
                -o-transform: translateX(-50px);
                transform: translateX(-50px);
            }
        }

        .container .list {
            position: absolute;
            right: 10px;
            top: 45%;
            z-index: 20;
        }

        .container .list li {
            width: 20px;
            height: 20px;
            border: 3px solid transparent;
            background-color: #fff;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border-radius: 50%;
            margin-bottom: 10px;
            opacity: 0.5;
            z-index: 20;
        }

        .container .list li.current {
            border: 3px solid #fff;
            background-color: #1c1c1c;
            opacity: 1;
            animation: point 1s 0.2s;
        }

        @keyframes point {
            0% {
                transform: scale(.8);
            }
            50% {
                transform: scale(1.2);
            }
            100% {
                transform: scale(1);
            }
        }

    </style>

js :

<script>
    var container = document.getElementById("container");
    var list = document.getElementById("list");
    var box = document.getElementById("box");
    var cons = box.children;
    console.log(cons.length);
    var zIdx = 10;
    var nn = 0;
    var currentPosition = 0;
    //新增小圓點
    var arr = ["red", "blue", "yellow"];
    for (var i = 0; i < cons.length; i++) {
        cons[i].style.backgroundColor = arr[i];
        var li = document.createElement("li");
        list.appendChild(li);
    }

    list.children[0].className = "current";

    //e.wheelDelta > 0滾輪向下滾動，e.wheelDelta < 0表示滾輪向上滾動

    window.onmousewheel = function (e) {

        if (e.wheelDelta > 0) {
            currentPosition++;

            if (currentPosition > cons.length - 1) {
                currentPosition = 0;
            }

            for (var i = 0; i < cons.length; i++) {
                cons[i].style.zIndex = 1;
                list.children[i].className = "";
                cons[i].className = "con";
            }

            console.log(currentPosition);
            cons[currentPosition].style.zIndex = zIdx;
            cons[currentPosition].className = "con active";
            list.children[currentPosition].className = "current";
        } else {
            currentPosition--;

            if (currentPosition < 0) {
                currentPosition = cons.length - 1;
            }

            for (var i = 0; i < cons.length; i++) {
                cons[i].style.zIndex = 1;
                list.children[i].className = "";
                cons[i].className = "con";
            }

            console.log(currentPosition);
            cons[Math.abs(currentPosition)].style.zIndex = zIdx;
            cons[currentPosition].className = "con active";
            list.children[Math.abs(currentPosition)].className = "current";

        }

    }


</script>

更多精彩請關注一下微信公眾賬號：