运动函数的封装

 // 运动三要素,谁运动,运动属性,运动目标
    //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]
      }
    }
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值