鼠标滚轮滚动控制页面显示和页面动画

现在滚滚屏的效果几乎到处可见，下面我也来记录一组简单的滚滚屏效果，页面中，我只简单的添加了一个小动画。

页面结构：

<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>

更多精彩请关注一下微信公众账号：