前面几节我们只是讲述了一种运动,这节课我将讲述链式运动:就以一个动作接着一个动作完成。
对于这个实现,我们只需要改变一下就可以实现了,设置一个回调函数。
var timer;
window.onload=function(){
var div=document.getElementById("div1");
div.onmouseover=function(){
startMove(div,"height",400,function(){
//alert("aaa");
startMove(div,"width",400,function(){
startMove(div,"opacity",100);
});
});
}
div.onmouseout=function(){
startMove(div,"opacity",30,function(){
startMove(div,"width",200,function(){//我们移出div时的函数执行顺序跟移入的函数顺序是相反的。
startMove(div,"height",200);
});
});
}
}function startMove(obj,attr,target,fn){
clearInterval(timer);
timer=setInterval(function(){
var icur;
if(attr=="opacity"){
icur=Math.round(parseFloat(getStyle(obj,attr))*100); }else{
icur=parseInt(getStyle(obj,attr)) }
var speed=(target-icur)/8;
speed=speed>0? Math.ceil(speed):Math.floor(speed); if(icur==target){
clearInterval(timer);
if(fn){//如果设置了回调函数的话,我们就执行回调函数。
fn();
}
}else{
if(attr=="opacity"){
obj.style.opacity=(icur+speed)/100;
obj.style.filter="alpha(opacity"+(icur+speed)+")";
}
obj.style[attr]=parseInt(getStyle(obj,attr))+speed+"px";
}
},50)
} function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else if(getComputedStyle){
return getComputedStyle(obj,false)[attr];
}
}
这个改变我我们只是设置了一个回调函数来实现的。