Empaquetado simple y anotación de movimiento de movimiento.

Empaquetado simple y anotación de movimiento de movimiento.

 // 运动三要素,谁运动,运动属性,运动目标
    //ele,{left:1000,top:500,width:300},cb 回调函数
    var times = '';
    function startMove(ele, targetObj, cb) {
    
    
      // 设置清空定时器的开关
      let onOff = false;

      clearInterval(times);
      times = setInterval(() => {
    
    
        // 遍历运动的方向和目标
        for (let attr in targetObj) {
    
    
          // 获取元素实时的位置,计算speed
          let tmpPos = parseInt(getPos(ele, attr));
          console.log(tmpPos);
          let speed = (targetObj[attr] - tmpPos) / 10;
          speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
          // 到达目标值,设置开关状态
          if (tmpPos + speed == targetObj[attr]) {
    
    
            onOff = true;
          }
          // 设置元素运动
          ele.style[attr] = tmpPos + speed + 'px';

        }

        // 判断开关状态
        if (onOff) {
    
    
          clearInterval(times);
          // 回调函数存在且调用
          cb && cb();
        }
      }, 30)
    }
    // 获取元素的实时位置的函数
    function getPos(obj, attr) {
    
    
      if (obj.currentStyle) {
    
       // 获取css的样式
        return obj.currentStyle[attr];
      } else {
    
    
        return getComputedStyle(obj)[attr]
      }
    }