原生Js的运动框架

//先获取非行间样式。

function getStyle(obj,attr){
  if(obj.currentStyle){
    return obj.currentStyle[attr];
  }else{
    return getComputedStyle(obj, false)[attr];

  }
}

function move(obj,json,fn){
  clearInterval(obj.timer);
  obj.timer = setInterval(function(){
  var bStop = true;
for(var attr in json){
//第一步算元素的初始值
var iCur = 0;
//判断属性是否为透明度
if(attr == "opacity"){
iCur = parseInt(parseFloat(getStyle(obj,attr))*100)

}else{
iCur = parseInt(getStyle(obj,attr));
}


//算速度
var speed = (json[attr]-iCur)/8;
//速度取整
speed = speed>0?Math.ceil(speed):Math.floor(speed);


//判断是否都已经到达目的地
if(iCur != json[attr]){
bStop = false;
}


//运动原理
if(attr == "opacity"){
obj.style.opacity = (iCur+speed)/100;
obj.style.filter = "alpha(opacity:"+(iCur+speed)+")"
}else{
obj.style[attr] = iCur+speed+"px";
}

}

if(bStop){
clearInterval(obj.timer);
fn&&fn();
}
},30)
}

猜你喜欢

转载自www.cnblogs.com/-Los/p/9111809.html