JS之链式运动,及任意值运动框架,包括透明度的改变

时间:2023-12-26 22:47:55

  链式运动,顾名思义,一环扣一环,即执行完一个事件后,再接着执行下一个事件,在参数上面动手脚,将下一个要执行的函数名作为一个参数,即利用到回掉函数,下面代码中出现的fn,即回掉函数,

 function move(obj,attr,target,fn){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
     //1,取当前值
var iCur=0;
if (attr == 'opacity') {
iCur=parseInt(parseFloat(getStyle(obj,attr))*100);
}else{
iCur = parseInt(getStyle(obj,attr));
}
     //2,算速度
var speed = (target-iCur)/8
speed = speed>0?Math.ceil(speed):Math.floor(speed);
     //3,计时停止
if (iCur == target) {
clearInterval(obj.timer);
fn&&fn();//注意位置,要放在这里
}
else {
if (attr =='opacity') {
obj.style.opacity=(iCur+speed)/100;
}else{
obj.style[attr]=iCur+speed+'px';
}
} },30);
}

 对于以上框架,还有可以利用json对其进行优化,以上框架是每次改变一个属性,利用json则可以同时改变多个属性,详情见  下篇博文,JS之完美框架