js中的标签运动

我们要给按钮绑定相关标签，按动按钮，标签运动

    <button>点击控制div标签</button>
    <button>点击控制p标签</button>
    <button>点击点击控制h标签</button>
    <p>我是p标签</p>
    <div>我是div标签</div>
    <h1>我是h1标签</h1>

思路：

利用起始位置和结束位置坐标完成，及相应运动步长
1、先获取起始位置、结束位置的坐标，
2、利用两个坐标差，获得两者之间的总距离
3、定义一定时间每一步行走距离（距离为整数减小误差）
4、利用定时器，规定一定时间内走完所有

js代码如下：    var oDiv = document.querySelector('div');    var oP1 = document.querySelector('p');

var oH1 = document.querySelector('h1');

    var oBtn1 = document.querySelectorAll('button')[0];
    var oBtn2 = document.querySelectorAll('button')[1];
    var oBtn3 = document.querySelectorAll('button')[2];

    //绑定监听事件
    //div标签距离左边205个像素
    oBtn1.addEventListener('click',function(){
        move(oDiv,{left:205},function(){console.log('div停止了')});
    })
    //p标签距离上方9个像素
    oBtn2.addEventListener('click',function(){
        move(oP1,{top:9},fff)
    })
    //h1标签距离左边7个像素
    oBtn3.addEventListener('click' , function(){
        move(oH1, {left:7},hhh );
    })
    //通用位移函数
    //a表示标签对象，b表示运动的方式和目标存储的对象，c表示对象中的结尾函数
    function move(a,b,c){
        //将运动函数进行for..in循环，
        for(var type in b){
            //获取css最终执行样式中的初始位置像素
            var oldVal = parseInt(window.getComputedStyle(a)[type]);
            //
            var time = setInterval(function() {
                //新位置-初始位置就是总距离，再除以走的次数（步长），结果val为每一步走的距离
                var val = (b[type] - oldVal)/ 100;
                //取整，且判读正负，且通过正负向上或向下取整
                val = val > 0 ? Math.ceil(val) : Math.floor(val);
                //让原位置加新坐标，生成新的运动坐标，结果是运动的总距离
                oldVal += val;
                //将新坐标加上单位赋值给对象
                a.style[type] = oldVal + 'px';
                //判断,如果改变后位置,是目标位置，则清除定时器
                if( oldVal == b[type]){
                    clearInterval(time);
                    //做结尾函数的调用
                    c();
                }
            }, 10);
        }
    }
    function fff(){
        console.log('不管你是谁,反正你的运动停止了');
    }
    function hhh(){
        console.log('我停止了');
    }