原生js利用鼠標滾輪實現滾動到當前頁面實現動畫效果

本例子主要記錄的是一個滾滾屏效果的demo:

如下圖所示,當滾輪滾動到第二頁面/或者通過右側圓點點擊第二個圓點時,執行第二頁的動畫效果

這裡寫圖片描述

關於基本的頁面佈局結構就不多說瞭,直接貼上代碼如下:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>mousewheel</title> <link rel="stylesheet" href="./css/index.css"> </head> <body> <p class="container" id="container"> <p id="box"> <p class="con zIndex" id="one"> <p class="con1-left"><img src="./img/1.jpg" alt="\"></p> <p class="con1-right"><img src="./img/2.jpg" alt="\"></p> </p> <p class="con" id="two"> <p class="con2"> <img src="./img/3.jpg" alt="\"> </p> </p> <p class="con" id="three"> <p class="con3-top"><img src="./img/4.jpg" alt="\"></p> <p class="con3-bottom"><img src="./img/5.jpg" alt="\"></p> </p> </p> <ol id="list" class="list"> </ol> </p> <script src="js/common.js"></script> <script src="js/index.js"></script> </body> </html>

    <script src=”js/common.js”></script><script src=”js/index.js”></script>

    接下來就是,對上述的html通過css控制顯示樣式瞭;
    下述代碼可能看著有點亂這裡稍微說明一下
    (1)首先,我這裡隻是簡單的進行瞭css的reset去除一下邊距樣式等;
    (2)其次,記得加上html,body{height: 100%}隻有加上瞭這個才能讓我們寫的一個con占滿一整個屏幕;
    (3)接下來,就是針對每一個需要實現的動畫,編寫其最終狀態,以及利用animation增加動畫效果;

        * {
            margin: 0px;
            padding: 0px;
        }
    
        ul li,ol li{
            list-style: none;
        }
    
        html,
        body {
            width: 100%;
            height: 100%;
        }
    
        .container {
            width: 100%;
            height: 100%;
            position: relative;
            left: 0px;
            top: 0px;
            overflow: hidden;
        }
    
        .con {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 100%;
        }
    
        .con:nth-child(2){
            display: flex;
            justify-content: center;
            align-items: center;
        }
    
        /*設置動畫 狀態*/
    
        .con .test {
            width: 100px;
            height: 100px;
            background-color: deeppink;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-top: -50px;
            margin-left: -50px;
        }
    
        .con .con1-left{
            position: absolute;
            left: 100px;
            top: 100px;
        }
    
        .con .con1-right{
            position: absolute;
            left: auto;
            right: 20px;
            top: 100px;
        }
    
        .con .con2 img{
            border-radius: 50%;
        }
    
    
    
        /*設置 動畫*/
    
        .con.active .test {
            animation: anim 2s;
        }
    
        .con.active .con1-left{
            animation: con1Left 2s 0.1s;
        }
    
        .con.active .con1-right{
            animation: con1Right 2s 0.1s;
        }
    
        @-webkit-keyframes con1Left {
            0% {
                left: 0px;
                transform: scale(1.2);
            }
            50% {
                transform: scale(1.4) rotate(360deg);
            }
            100% {
                left: 100px;
                transform: scale(1);
            }
        }
    
        @-webkit-keyframes con1Right {
            0% {
                right: 100px;
                transform: scale(1.2);
            }
            50% {
                transform: scale(1.4) rotate(360deg);
            }
            100% {
                right: 20px;
                transform: scale(1);
            }
        }
    
        .con.active .con2{
            animation: con2 2s;
        }
    
        @-webkit-keyframes con2 {
            0% {
                transform: scale(1.2);
            }
            50% {
                transform: scale(1.4);
            }
            100% {
                border-radius: 50%;
                transform: scale(1) rotate(360deg);
            }
        }
    
        .con.active .con3-top{
            animation: con3Top 2s;
        }
    
        .con.active .con3-bottom{
            animation: con3Bottom 2s;
        }
    
        @-webkit-keyframes con3Top {
            0% {
                transform: translateY(-100px);
                transform: scale(1.2);
            }
            50% {
                transform: scale(1.4);
            }
            100% {
                transform: rotate(30deg);
            }
        }
    
        @-webkit-keyframes con3Bottom {
            0% {
                transform: translateY(500px);
                transform: scale(1.2);
            }
            50% {
                transform: scale(1.4);
            }
            100% {
                transform: rotate(360deg) scale(1);
            }
        }
    
    
        @-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: #00f;
            -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);
            }
        }
    

    最後,就是控制整個滾滾屏進行頁面切換的js瞭,以下主要分成兩大塊內容,common.js是編寫好的能夠進行復用的緩動動畫效果,以及鼠標滾輪事件;index.js就是真正的控制顯示的代碼瞭。

    //common.js
    (function mouseWheel() {
        if (document.addEventListener) {
            document.addEventListener('mousewheel', function(event) {
                Detail(event);
            });
            document.addEventListener('DOMMouseScroll', function(event) {
                Detail(event);
            });
        } else if(document.addEventListener&&!document.attachEvent){
            document.attachEvent('onmousewheel', function(event) {
                Detail(event);
            });
        }
    })();
    
    
    
    function animate(obj, json, fn) {
            clearInterval(obj.timer);
            obj.timer = setInterval(function () {
                var flag = true;//放在這兒隻要有一個返回false那就是false
                for (var k in json) {
                    //var flag = true;//如果放在這兒變成查看最後一個執行的情況,執行好瞭返回true,未完成返回false
                    if(k === "opacity"){
                        var target = json[k]*100;
                        var leader = parseInt(getStyle(obj, k))*100;
                        var step = (target - leader) / 5;
                        step = step > 0 ? Math.ceil(step) : Math.floor(step);
                        leader = leader + step;
                        obj.style[k] = leader/100;
                    }else if(k === "zIndex"){
                        obj.style.zIndex = json[k];
                    }else{
                        var target = json[k];
                        var leader = parseInt(getStyle(obj, k));
                        var step = (target - leader) / 5;
                        step = step > 0 ? Math.ceil(step) : Math.floor(step);
                        leader = leader + step;
                        console.log("test");
                        obj.style[k] = leader + "px";
                    }
                    if (leader !== target) {
                        flag = false;
                    }
                    console.log(flag);
                }
    
                if(flag){
                    clearInterval(obj.timer);
                    if (fn) {
                        fn();
                        alert("shizingle");
                    }
                }
            }, 15);
        }
    
        function getStyle(obj, attr) {
            if (window.getComputedStyle) {
                return window.getComputedStyle(obj, null)[attr];
            } else {
                return obj.currentStyle[attr];
            }
        }
    //index.js
    (function mouseWheel() {
        if (document.addEventListener) {
            document.addEventListener('mousewheel', function(event) {
                Detail(event);
            });
            document.addEventListener('DOMMouseScroll', function(event) {
                Detail(event);
            });
        } else if (document.addEventListener && !document.attachEvent) {
            document.attachEvent('onmousewheel', function(event) {
                Detail(event);
            });
        }
    })();
    
    var container = document.getElementById("container");
    var list = document.getElementById("list");
    var box = document.getElementById("box");
    var cons = box.children;
    //此處設置第一頁面為默認顯示頁面
    cons[0].style.top = 0;
    var zIdx = 10;
    var nn = 0;
    var currentPosition = 0;
    //添加小圓點
    var arr = ["#fafafa", "#cacaca", "#dadada"];
    
    for (var i = 0; i < cons.length; i++) {
        cons[i].style.backgroundColor = arr[i];
        var li = document.createElement("li");
        list.appendChild(li);
        list.children[i].idx = i;
        //點擊小圓點切換顯示頁面
        list.children[i].onclick = function() {
            for (var i = 0; i < list.children.length; i++) {
                list.children[i].className = "";
                cons[i].style.zIndex = 1;
                // 如果想要執行一次動畫之後就下一次進入頁面不再有動畫,隻要不清空產生動話的active就可以瞭
                cons[currentPosition].className = "con";
                if(i !== currentPosition){
                    cons[i].style.top = "100%";
                }
            }
            currentPosition = this.idx;
            this.className = "current";
            cons[currentPosition].style.zIndex = zIdx;
            cons[currentPosition].className = "con active";
            animate(cons[currentPosition], {
                "top": "0"
            });
        };
    }
    
    list.children[0].className = "current";
    //e.wheelDelta > 0滾輪向下滾動,e.wheelDelta < 0表示滾輪向上滾動
    function Detail(event) {
    
        var e = event || window.event;
        if ((-e.detail || e.wheelDelta) > 0) {
            var bgc = cons[currentPosition].style.backgroundColor;
            document.body.style.backgroundColor = bgc;
            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";
                if(i !== currentPosition){
                    cons[i].style.top = "-100%";
                }
            }
            console.log(currentPosition);
            cons[currentPosition].style.zIndex = zIdx;
            cons[currentPosition].className = "con active";
            animate(cons[currentPosition], {
                "top": "0"
            });
            list.children[currentPosition].className = "current";
    
        } else {
            var bgc = cons[currentPosition].style.backgroundColor;
            document.body.style.backgroundColor = bgc;
            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";
                if(i !== currentPosition){
                    cons[i].style.top = "100%";
                }
            }
            console.log(currentPosition);
            cons[Math.abs(currentPosition)].style.zIndex = zIdx;
            cons[currentPosition].className = "con active";
            animate(cons[currentPosition], {
                "top": "0"
            });
            list.children[Math.abs(currentPosition)].className = "current";
        }
    }
    

    發佈留言