js封装运动2（终极版请参考主页js运动3））-优快云博客

本文链接：https://blog.youkuaiyun.com/dergfg/article/details/112249950

本文介绍了一种使用CSS和JavaScript实现元素动画的方法，通过控制元素的位置和透明度来达到平滑过渡的效果，并且详细解释了如何通过JavaScript精确控制这些CSS属性的变化。

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

保持对代码的热爱并保存怀疑态度


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #box1{width: 100px;height: 100px;background: red;position: absolute;left:0;top:0;}
        #box2{width: 100px;height: 100px;background: green;position: absolute;left:1000px;top:130px;}
        .line{width: 1px;height: 600px;position:absolute;left: 500px;background: black;top:0}
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div>
    <div class="line"></div>
</body>
<script>
    // 运动源
    var obox1 = document.getElementById("box1");
    var obox2 = document.getElementById("box2");

    var t;

    // 随着时间的变化，减少speed的值
    // 不能小于0

    obox1.onclick = function(){
        move(obox1, {top:50,left:400,});  //你想到啥就测试啥css的属性
    }

    // 将属性和对应的目标，作为一个对象的键值对传参
    function move(ele, data){
        clearInterval(t);
        t = setInterval(() => {
            var flag = true;    //为了后面的判断，怎么清空计时器 ，直接清空的会导致如果你的第一个参数到达了位置后第二个直接停止的问题
            // 在计时器中遍历这个对象，拿到要操作的属性和对应目标
            for(var i in data){
                // 获取当前值       //i为对象的键
                var now = i === "opacity" ? gertStyle(ele, i) * 100 : parseInt(gertStyle(ele, i));  //三目简化，判断是否传入的参数是opacity
                // 计算步长
                var speed = (data[i] - now)/10;  //data[i]为对象的值
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                  // 向上取整，因为浏览器执行的时候会忽略小于1像素的(具体解释清看缓冲运动未封装的，有案例测试)
                // 向下取整，因为浏览器执行的时候会忽略小于1像素的
                
                // 判断属性是否是透明
                ele.style[i] = i === "opacity" ? (now + speed)/100 : now + speed + "px";   //三目简化
                // 所有属性都要目标，才能清除计时器，需要有状态记录，但是每个属性都有一个状态，太浪费空间
                // 反向判断，只要有一个属性没到目标，不清除计时器，只需要一个状态，记录是否有属性没到目标
                if(now !== data[i]){     //如果现在的位置不等于结束的位置，flag的值改为false
                    flag = false;
                }
            }
            // 如果flag为true表示没有属性没到目标，可以清除计时器了
            if(flag){
                clearInterval(t);
            }
        }, 30);
    }

    // 获取非行内样式的功能
    function gertStyle(ele, attr){  //ele元素   attr为元素的css属性
        if(ele.currentStyle){
            return ele.currentStyle[attr];
        }else{
            return getComputedStyle(ele,false)[attr];
        }
    }


</script>
</html>