js封装一个多物体多属性运动的函数

function startMove(node, cssObj, complete) {
//complate = show;
clearInterval(node.timer);
node.timer = setInterval(function () {
var isEnd = false; //假设都到目的值了 (质数那里一样) 如果只有一个到达目的值不效果 全都到达目的值才执行
for (var attr in cssObj) {
var iTarget = cssObj[attr];
//通过getStyle方法获取当前值
var iCur = null;
if (attr === “opacity”) {
iCur = parseInt(parseFloat(getStyle(node, “opacity”)) * 100);
} else {
iCur = parseInt(getStyle(node, attr));
}
var speed = (iTarget - iCur) / 8;
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

        iCur += speed;
        if (attr === "opacity") {
          node.style.opacity = iCur / 100;
          node.style.filter = `alpha(opacity=${iCur})`;
        } else {
          node.style[attr] = iCur + "px";
        }
        if(iCur !== iTarget){//只要有一个不达到就不为true
          isEnd = true;
        }
      }
      //等所有动画都到达目的值以后,执行
      if(isEnd==false){
        clearInterval(node.timer);
        if(complete){
          complete.call(node);
        }
      }
    }, 30);
  }

  //封装一个跨浏览器兼容的获取当前有效样式的函数
  function getStyle(node, cssStyle) {
    return node.currentStyle
      ? node.currentStyle[cssStyle]
      : getComputedStyle(node)[cssStyle];
  }
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值