JavaScript封装一个动画函数（详细的不能再详细）_scss动画效果封装成一个函数-优快云博客

本文链接：https://blog.youkuaiyun.com/qw_cui/article/details/120496203

这篇博客介绍了一个简单的JavaScript动画函数封装过程，适用于网页设计中的轮播图、盒子淡入淡出等动画效果。通过封装函数，可以方便地控制元素的移动，如将盒子从当前位置平滑移动到目标位置。函数包括运动函数定义、样式设置、定时器处理以及边界判断，确保动画流畅且能准确到达目标位置。此外，还提供了一个获取元素样式的辅助函数。通过实例展示了如何在点击事件中调用该动画函数，使得盒子在页面上移动。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

网页设计经常会用到各种动画效果，为了方便。可以简单封装一个动画函数。

例如轮播图，盒子淡入淡出，移动的小球......都可以用我们的函数来直接调用

废话少说上代码！！！

1.首先一个简单的HTML代码块

<div class="box"></div>

2.然后简单调一下样式，

定位一定要加，不然你的盒子就死了，不会动了。

<style>
     .box {
         width: 100px;
         height: 100px;
         background: pink;
         border-radius: 20px;
         margin: 200px auto;
         position: relative;
        }
</style>

3.下面封装函数（代码里有详细的注释）

/*
          运动函数
          @nodeObj   移动的物体
          @property  发生改变的属性
          @target    目标位置
          @step      速度（每次移动的距离）
      */
function move(nodeObj, property, target, step, callback) {
    //判断方向 ：根据当前位置与重点位置的关系
    step = parseFloat(getStyle(nodeObj, property)) > target ? -step : step;

    // 先清除一下定时器，保证每次点击都只有一个定时器
    clearInterval(nodeObj.t);

    // 创建定时器函数 多长时间执行一次
    nodeObj.t = setInterval(function() {

        //取出当前样式值 +速度
        var speed = parseFloat(getStyle(nodeObj, property)) + step;

        //边界判断
        //速度为负，speed <= target   速度为正，speed >= target
        // if (step>0 && speed >= target) {  //边界值
        // if (step < 0 && speed <= target) {
        // 左边界 || 右边界
        if (step < 0 && speed <= target || step > 0 && speed >= target) {

            // 到了指定的位置停止定时器
            speed = target;
            clearInterval(nodeObj.t);

            // 判断有没有传进来回调函数
            if (callback) {
                callback();
            }
        }

        // 这句代码就相当于 box.style.left=当前样式值 +速度+'px'
        nodeObj.style[property] = speed + 'px';
    }, 10)
}

//取样式
// 注意：currentStyle属性和getComputedStyle属性不能设置属性,只能获取！！！
// getComputedStyle() 属于window对象下的一个方法， 用于获取元素的样式属性。
function getStyle(nodeObj, property) {
    if ("getComputedStyle" in window) {
        //适配Chrome、火狐、IE9以上版本浏览器
        return getComputedStyle(nodeObj)[property];
    }
    //适配IE8浏览器
    return nodeObj.currentStyle[property];
}

4.最后一步就是把封装的函数链入HTML中

<script src="./move.js"></script>
    <script>
        var box = document.querySelector('.box');
        // 给box添加点击事件
        box.onclick = function() {
            // 调刚刚写的函数
            move(box, 'left', 300, 5)
        }
    </script>

这样一个较为完善的动画函数就封装完成了。