移动div盒子 原生js

开始

点击第一个按钮移动到400px

点击第二个按钮移动到800px

点击第一个按钮移动到400px
这里需要用到定时器
需要注意的是：
1.元素移动div盒子要脱离文档流，即（position：absolute）
2.通过element.style.left不能获取元素的left，只能设置，要用offsetLeft()来获取
3.最好不用var timeid = setInterval(fn,time)的方式，因为这样每点击一次按钮就会定义一个新的timeid，你会发现移动的盒子逐渐加快速度。好的方式是把timeid变成element的属性，即element.timeid
4.通过判断（目标位置-当前位置）的绝对值和step的绝对值的大小来决定盒子是否直接到达目标值。

my$("bt1").onclick = function(){animation(my$("dv"),400);}
    my$("bt2").onclick = function(){animation(my$("dv"),800);}
    function animation(element,target){
        console.log(element.offsetLeft)
        clearInterval(element.timeid)
        element.timeid = setInterval(function(){
            var current = element.offsetLeft;
            var step = 8;
            step= current<target?step:-step;
            current+=step;
            if(Math.abs(target-current)>Math.abs(step)){
                element.style.left = current +"px";
            }else{
                clearInterval(element.timeid)
                element.style.left = target+"px";
            }
        }, 50);
    }

标签：原生,function,step,element,timeid,div,js,my,left
来源： https://blog.csdn.net/weixin_41865901/article/details/111767683