JS之链式运动,及任意值运动框架,包括透明度的改变
链式运动,顾名思义,一环扣一环,即执行完一个事件后,再接着执行下一个事件,在参数上面动手脚,将下一个要执行的函数名作为一个参数,即利用到回掉函数,下面代码中出现的fn,即回掉函数,
1 function move(obj,attr,target,fn){
2 clearInterval(obj.timer);
3 obj.timer = setInterval(function(){
//1,取当前值
4 var iCur=0;
5 if (attr == 'opacity') {
6 iCur=parseInt(parseFloat(getStyle(obj,attr))*100);
7 }else{
8 iCur = parseInt(getStyle(obj,attr));
9 }
//2,算速度
10 var speed = (target-iCur)/8
11 speed = speed>0?Math.ceil(speed):Math.floor(speed);
//3,计时停止
12 if (iCur == target) {
13 clearInterval(obj.timer);
14 fn&&fn();//注意位置,要放在这里
15 }
16 else {
17 if (attr =='opacity') {
18 obj.style.opacity=(iCur+speed)/100;
19 }else{
20 obj.style[attr]=iCur+speed+'px';
21 }
22 }
23
24 },30);
25 }
对于以上框架,还有可以利用json对其进行优化,以上框架是每次改变一个属性,利用json则可以同时改变多个属性,详情见 下篇博文,JS之完美框架