实现思路:
先进行某个运动,该运动完成后,再进行下一步运动,就达到了链式运动的效果
效果
链式运动
- 在链式运动编写中呢,我们将运用到简单的异步,如果有学习了nodejs的同学,你们将见到在nodejs中常见的一种写法,用一个callback函数做参数,当前面运动执行完后我们将调用下一步要执行的运动的函数。
- 在右方回调(callback)函数中,使用this,它指向的是Window
- 这次我们运用到了第一小节写的getStyle函数,注意不同之处,由于我们我们之前的getStyle函数获取width返回的是带单位的字符串,因此在此我们对取得的width值转换为浮点数。
function startMove(obj,target,attr,fn)
{
clearInterval(timer);
timer=setInterval(function(){
var speed=(target - getStyle(obj,attr))/20;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
if(getStyle(obj,attr) == target){
clearInterval(timer);
if(fn) {
fn();
}
}
else{
obj.style[attr]=getStyle(obj,attr) + speed + 'px';
}
},30)
}
function getStyle(obj,attr){
if(obj.currentStyle){
return parseFloat(obj.currentStyle[attr]);
}
else{
return parseFloat(getComputedStyle(obj,false)[attr]);
}
}
根据第二点的提示修改右方JavaScript代码框中的this