原生js利用鼠标滚轮实现滚动到当前页面实现动画效果

最新推荐文章于 2022-11-23 20:57:56 发布

小白变怪兽

最新推荐文章于 2022-11-23 20:57:56 发布

阅读量1.4w

点赞数 5

分类专栏： javascript 文章标签：动画 javascript 鼠标

本文链接：https://blog.csdn.net/u013558749/article/details/53458029

版权

javascript 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

本例子主要记录的是一个滚滚屏效果的demo:

如下图所示，当滚轮滚动到第二页面／或者通过右侧圆点点击第二个圆点时，执行第二页的动画效果

这里写图片描述

关于基本的页面布局结构就不多说了，直接贴上代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>mousewheel</title>
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <div class="container" id="container">
        <div id="box">
            <div class="con zIndex" id="one" style="z-index: 3">
                <div class="con1-left"><img src="./img/1.jpg" alt=""></div>
                <div class="con1-right"><img src="./img/2.jpg" alt=""></div>
            </div>
            <div class="con" id="two">
                <div class="con2">
                    <img src="./img/3.jpg" alt="">
                </div>
            </div>
            <div class="con" id="three">
                <div class="con3-top"><img src="./img/4.jpg" alt=""></div>
                <div class="con3-bottom"><img src="./img/5.jpg" alt=""></div>
            </div>
        </div>
        <ol id="list" class="list">

        </ol>
    </div>
    <script src="js/common.js"></script>
    <script src="js/index.js"></script>
</body>

</html>

接下来就是，对上述的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";
    }
}