JS动画函数的封装

最新推荐文章于 2025-05-19 23:37:29 发布

原创最新推荐文章于 2025-05-19 23:37:29 发布 · 1.7k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #动画

DOM 同时被 2 个专栏收录

20 篇文章

订阅专栏

JavaScript

18 篇文章

订阅专栏

本文介绍了一个JavaScript动画函数的封装方法，通过示例代码展示了如何创建一个缓动动画函数，并实现元素位置的平滑过渡。

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

JS动画函数的封装

有很多常用的JavaScript功能实现，我们不妨将它们封装起来，方便以后的使用。
下面是我对JavaScript动画动画函数的封装，参考了其他人的博文，如果有冒犯，请联系我。

闲话少说，贴上demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JS动画demo与函数封装</title>
    <style>
        .parent{
            width: 300px;height: 300px;
            background: gray;
            position: relative;
        }
        .son{
            position: absolute;
            width: 50px;
            height: 50px;
            background: rgb(100, 100,180);
        }
    </style>
</head>
<body>
    <div class = "parent">
        <div class="son">
        </div>
    </div>

    <script>
        window.onload = function(){
            var parent = document.getElementsByClassName("parent")[0];
            var son = document.getElementsByClassName("son")[0];

            parent.addEventListener("mouseover",function(){
                animate(son, { "left": 100 }, function () { });
            },false);
            parent.onmouseleave = function () {
                animate(son, { "left":0 }, function () { });
            }
        }
    </script>
    <script>
        // 获取当前制定样式的属性值
        function getStyle(ele,attr){
            if(window.getComputedStyle){       //兼容性检测，优先采用W3C标准
                return window.getComputedStyle(ele,null)[attr];
            }else{
                return ele.currentStyle[attr]; //兼容Ie低版本浏览器
            }
        }     
        /*
        * 缓动动画函数
        * 原理：盒子原本的样式值 + "步长"（不断变化的值）；达到目标值后停止缓动。
        * ele：指定的节点对象
        * attr_json：样式属性和值的集合（json对象格式，如{"width":200,"left":10}）
        * callback:回调函数，动画执行完后执行的函数
        * 注意：如果控制 盒子的透明度 在本函数json属性集合中需要使用opacity,控制层级需要使用zIndex
        * */
        function animate(ele,attr_json,callback){
            // 清除定时器，避免动画重合
            clearInterval(ele.timer);

            ele.timer = setInterval(function(){
                var flag = true;    //定时器是否清除的标记值

                for(var attr in attr_json){
                    var current = 0;
                    //获取当前样式
                    if(attr == "opacity"){          //如果是透明度，那么返回值，如果不兼容就返回0
                        current = Math.round(parseInt(getStyle(ele,attr)*100))||0;
                    }else{                          //其他
                        current = parseInt(getStyle(ele,attr));
                    }

                    //计算步长,并进行取整来避免除不尽引起的误差
                    var stepLength = (attr_json[attr] - current)/10;
                    stepLength = stepLength > 0?Math.ceil(stepLength):Math.floor(stepLength);

                    //判断要改变的样式是否是透明度
                    if(attr == "opacity"){
                        if("opacity" in ele.style){
                            ele.style.opacity = (current+stepLength)/100;
                        }else{
                            ele.style.filter = "alpha(opacity = " + (current+stepLength)*10+")";
                        }
                    }

                    //判断要改变的样式是否是层级
                    else if(attr == "zIndex"){
                        ele.style.zIndex = current+stepLength;
                    }
                    //其他属性
                    else{
                        ele.style[attr] = (current + stepLength) + "px";
                    }
                    //判断是否清除定时器
                    if(current != attr_json[attr]){
                        flag = false;
                    }
                }

                if(flag){
                    clearInterval(ele.timer);
                    if(callback){
                        callback();
                    }
                }
            },10)
        }
    </script>
</body>
</html>