js多属性同时运动

最新推荐文章于 2024-07-30 10:56:44 发布

歪大梨

最新推荐文章于 2024-07-30 10:56:44 发布

阅读量65

点赞数

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

本文链接：https://blog.csdn.net/weixin_64037609/article/details/126919804

版权

前端专栏收录该内容

82 篇文章 0 订阅

订阅专栏

common.js在上一篇中可以找到

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div></div>
    <script src="../../../common.js"></script>
    <script>
        //在函数中 我们只留两个参数 元素 和 选项对象
        //选项对象 是一个对象  其中包含所有要添加动画的样式属性 和 终点值
        /* 
            {
                样式名：终点值,
                样式名1：终点值
            }
        */
        function bufferMove(ele,option) {
            clearInterval(ele.timer);
            var flag;
            //1.设置定时器
            ele.timer = setInterval(function(){
                //声明一个变量 记录 当前所有动画是否都完成的状态
                flag = "都到了";
                //编写所有样式动画 都往前走一步的代码
                //1.循环要添加动画的所有样式
                for(var key in option){
                    //key是属性名        option[key]是属性值
                    //要添加动画的样式名  动画的终点值
                    //1.获取动画的两要素
                    if(key=="opacity"){
                        var start = getStyle(ele,key)*100;
                        var end = option[key]*100;
                    }else{
                        var start = parseInt(getStyle(ele,key));
                        var end = option[key];
                    }
                    //计算步长
                    var step = (end-start)/10;
                    step = step>0 ? Math.ceil(step) : Math.floor(step);
                    //编写走一步的代码
                    start += step;
                    //判断 是否有人没到终点
                    if(start!=end){
                        flag = "没到"
                    }
                    if(key=="opacity"){
                        ele.style[key] = start/100
                    }else{
                        ele.style[key] = start+"px";
                    }
                }  
                if(flag=="都到了"){
                    clearInterval(ele.timer);
                }
            },30)
        }
        var div = document.querySelector("div");
        div.onclick = function(){
            bufferMove(div,{
                width:300,
                height:300,
                opacity:0.3
            })
        }


       
    </script>
</body>
</html>