js封装物体运动1（终极版请参考主页js运动3）

本文链接：https://blog.csdn.net/dergfg/article/details/112249937

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

终极版点这里

<!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, "left", 800);
    }
    obox2.onclick = function(){
        move(obox2, "left", 400);
    }

    function move(ele, attr, target){
        clearInterval(t);
        t = setInterval(() => {
            // 因为传进来的属性充满不确定性，offset快速获取尺寸类系列属性，不方便使用，所以自己封装了获取行内样式的功能
            // 获取元素属性的当前值
            if(attr === "opacity"){  //判断参数是不是opacity
                var now = gertStyle(ele, attr) * 100;  //分辨率会出现问题 为0-1 乘以100方便计算，后面除以100就好了
            }else{
                var now = parseInt(gertStyle(ele, attr));  //为了去除"px",因为后面会赋值回去加了px
            }

            var speed = (target - now)/10;   //总距离减去盒子现在的距离
            // 利用三目表达式简化了if-else
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);  //向上向下取正，具体的为什么这么写请参考缓冲运动（毕竟那个我写的很详细了）

            if(now === target){   //到达距离了清除计时器
                clearInterval(t);
            }else{
                // 透明属性，单独设置
                if(attr === "opacity"){
                    ele.style.opacity = (now + speed)/100;
                }else{
                    ele.style[attr] = now + speed + "px";  //对应上面去除px
                }
            }
        }, 30);
    }

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


</script>
</html>