//最終封裝的'完美移動框架'
function?startMove(obj,json,fn){
var?flag=true;//標(biāo)志所有運(yùn)動是否到達(dá)目標(biāo)值
clearInterval(obj.timer);
obj.timer=setInterval(function(){
for(var?attr?in?json){
var?curr=0;
//判斷是否為透明度
if(attr=='opacity'){
curr=Math.round(parseFloat(getStyle(obj,attr))*100);
}else{
curr=parseInt(getStyle(obj,attr));
}
//移動速度處理
var?speed=0;
speed=(json[attr]-curr)/10;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(curr!=json[attr]){
flag=false;
}
if?(attr=='opacity')?{
obj.style.filter='alpha(opacity:'+(curr+speed)+")";
obj.style.opacity=(curr+speed)/100;
}else{
obj.style[attr]=curr+speed+'px';
}
}
if(flag){
clearInterval(obj.timer);
if(fn){
fu();
}
}
},30);
}
//取樣式
function?getStyle(obj,attr){
if(obj.currentStyle){//IE取樣式
return?obj.currentStyle[attr];
}else{
return?getComputedStyle(obj,false)[attr];
}
}
JS單線程和完美運(yùn)動框架的多定時器
John_Wang
2016-01-19 10:48:22