JS笔记动画函数封装到js文件中 / 动画实例

最新推荐文章于 2022-07-05 16:56:40 发布

yogur_father

最新推荐文章于 2022-07-05 16:56:40 发布

阅读量200

点赞数

分类专栏：入门学习文章标签：定位 css js

本文链接：https://blog.csdn.net/yogur_father/article/details/110838523

版权

入门学习专栏收录该内容

156 篇文章 3 订阅

订阅专栏

本文介绍了如何使用JavaScript封装动画函数，包括基本的平移动画和带缓冲效果的平移动画。通过两个实例展示了动画在网页交互中的应用，如元素的移动和页面滚动到顶部的效果。同时，文章还演示了如何将动画函数封装到独立的JS文件中，以便于代码复用和组织。

摘要由CSDN通过智能技术生成

一.动画函数的封装

一定要给移动的盒子定位

div {
    position: absolute;
    left: 0;
    width: 100px;
    height: 100px;
    background-color: pink;
}

封装函数

<script>
    function move(obj, target){  // obj是元素对象，target是移动像素边界
        clearInterval(obj.timeout);  // 防止多次点击，使定时器累加，使速度越来越快
        obj.timeout = setInterval(function() {
            if(obj.offsetLeft >= target) {    // 不用带像素单位
                clearInterval(obj.timeout);
            }

            // 启动动画
            obj.style.left = obj.offsetLeft + 5 + 'px';  // 注意style的left是小写，offsetLeft是大写
        }, 30)
    }

    var div = document.querySelector("div");
    move(div, 400)
     
</script>

二.函数的封装

我们在左边新建一个js文件
在HTML头上添加一句<script src="函数文件名.js"></script>
然后就可以在代码中引用了

JS文件中(带缓冲的移动)

function move(obj, target, callback){  // obj是元素对象，target是移动像素边界
    clearInterval(obj.timeout);  // 防止多次点击，使定时器累加，使速度越来越快
    obj.timeout = setInterval(function() {
        var step = (target - obj.offsetLeft) / 10;
        step = step > 0 ? Math.ceil(step) : Math.floor(step);  // 向上取整，向下取整
        if(obj.offsetLeft == target) {  // 不用带像素单位
            clearInterval(obj.timeout);

            if(callback){
                callback();
            }
        }  

        // 启动动画
        obj.style.left = obj.offsetLeft + step + 'px';  // 注意style的left是小写，offsetLeft是大写
    }, 30)
}

实例 1

HTML

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 人物表格 </title>
    <link rel="stylesheet" href="style.css">
    <script src="move.js"></script>

    
</head>

<body>
    <div class="stay">
        <div>👉</div>
        <span class="go"></span>
    </div>

<script>
    var btn = document.querySelector(".stay");
    var span = document.querySelector(".go");
    
    // 经过触发
    btn.addEventListener("mouseenter", function() {
        move(span, 100, function() {
            btn.children[0].innerHTML = "👈";
        });
    })

    btn.addEventListener("mouseleave", function() {   // 使用mouseleave 别用mouseout
        move(span, -300, function() {
            btn.children[0].innerHTML = "👉";
        })
    })
     
     
</script>

 </body>

 </html>

CSS

* {
    padding: 0px;
    margin: 0px;
}

.go {
    position: absolute;
    left: -300px;
    width: 300px;
    height: 100px;
    background-color: purple;
}

div {
    float: left;
    text-align: center;
    line-height: 100px;
    width: 100px;
    height: 100px;
    background-color: pink;
}

function move(obj, target, callback){  // obj是元素对象，target是移动像素边界
    clearInterval(obj.timeout);  // 防止多次点击，使定时器累加，使速度越来越快
    obj.timeout = setInterval(function() {
        var step = (target - obj.offsetLeft) / 10;
        step = step > 0 ? Math.ceil(step) : Math.floor(step);  // 向上取整，向下取整
        if(obj.offsetLeft == target) {  // 不用带像素单位
            clearInterval(obj.timeout);

            if(callback){
                callback();
            }
        }  

        // 启动动画
        obj.style.left = obj.offsetLeft + step + 'px';  // 注意style的left是小写，offsetLeft是大写
    }, 30)
}

在这里插入图片描述

实例 2：返回顶部

HTML

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 人物表格 </title>
    <link rel="stylesheet" href="style.css">
    <script src="move.js"></script>


</head>

<body>
    <div class="father">
        <div class="one"></div>
        <div class="two"></div>
        <div class="three"></div>
        <div class="four"></div>

        <div class="top">👆</div>
    </div>


    <script>
        var top = document.querySelector("top");
        top.addEventListener("click", function() {
            move(window, 0);
        })


    </script>

</body>

</html>

CSS

* {
    padding: 0px;
    margin: 0px;
}

.one {
    height: 400px;
    margin: 50px;
    background-color: pink;
}

.two {
    height: 400px;
    margin: 50px;
    background-color:blue;
}

.three {
    height: 400px;
    margin: 50px;
    background-color: purple;
}

.four {
    height: 400px;
    margin: 50px;
    background-color: orange;
}

.top {
    position: fixed;
    top: 60%;
    left: 95%;

    text-align: center;
    line-height: 100px;
    width: 50px;
    height: 100px;
    background-color: red;

    cursor: pointer;
    z-index: 2;
}

function move(obj, target, callback){  // obj是元素对象，target是移动像素边界
    clearInterval(obj.timeout);  // 防止多次点击，使定时器累加，使速度越来越快
    obj.timeout = setInterval(function() {
        var step = (target - window.pageYOffset) / 10;
        step = step > 0 ? Math.ceil(step) : Math.floor(step);  // 向上取整，向下取整
        if(window.pageYOffset == target) {  // 不用带像素单位
            clearInterval(obj.timeout);

            if(callback){
                callback();
            }
        }  

        // 启动动画
        window.scroll(0, window.pageYOffset + step);  // 使用 scroll 函数进行页面跳转
    }, 15)
}