微客导航 » 文章资讯 » JavaScript运动框架链式运动到完美运动（五）

JavaScript运动框架链式运动到完美运动（五）

2024-02-23 13:56:03 277

基于前几篇的运动框架基础，本文主要讲解一下链式运动，就是运动完后接着再运动，比如很多网站中，一个方框的出现和退出：出现时先变宽再变高，退出时先变矮再变窄退出！
之前的模型是：

startMove(obj,json);

现在改为：

startMove(obj,json,fn);

也就是在第一次运动结束的时候执行fn();fn是传过来的一个参数，这个参数是个函数，定时器清理之后手动运行fn();如果想采用链式运动，那就是在fn中再调用startMove(obj,json,fn)，再在里面的fn中调用startMove(obj,json,fn)，可以一直玩下去





运动框架(五)：链式运动到完美运动

div{
width:100px;
height:100px;
background:orange;
margin:10px;
float:left;
}

varoDiv=document.getElementById('div1'); oDiv.onmouseover=function(){ startMove(oDiv,{width:300,opacity:30},function(){ startMove(oDiv,{height:500}); }); }; oDiv.onmouseout=function(){ startMove(oDiv,{height:100},function(){ startMove(oDiv,{width:100,opacity:100}); }) }; functiongetStyle(obj,attr){ if(obj.currentStyle){ returnobj.currentStyle[attr]; }else{ returngetComputedStyle(obj,null)[attr]; } } functionstartMove(obj,json,fn){ clearInterval(obj.timer); obj.timer=setInterval(function(){ varbStop=true; for(varattrinjson){ varcur=0; if(attr==='opacity'){ cur=Math.round(parseFloat(getStyle(obj,attr))*100); }else{ cur=parseInt(getStyle(obj,attr)); } if(cur!=json[attr]){ bStop=false; } varspeed=(json[attr]-cur)/10; speed=speed>0?Math.ceil(speed):Math.floor(speed); cur+=speed; if(attr==='opacity'){ obj.style.filter='alpha(opacity:'+cur+')'; obj.style.opacity=cur/100; }else{ obj.style[attr]=cur+'px'; } } if(bStop){ clearInterval(obj.timer); if(fn)fn(); } },30); }

最后提取出来的完美运动框架如下，motionFrame.js：

functiongetStyle(obj,attr){
if(obj.currentStyle){
returnobj.currentStyle[attr];
}else{
returngetComputedStyle(obj,null)[attr];
}
}

functionstartMove(obj,json,fn){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
varbStop=true;
for(varattrinjson){
varcur=0;
if(attr==='opacity'){
cur=Math.round(parseFloat(getStyle(obj,attr))*100);
}else{
cur=parseInt(getStyle(obj,attr));
}
if(cur!=json[attr]){
bStop=false;
}
varspeed=(json[attr]-cur)/10;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
cur+=speed;
if(attr==='opacity'){
obj.style.filter='alpha(opacity:'+cur+')';
obj.style.opacity=cur/100;
}else{
obj.style[attr]=cur+'px';
}

}
if(bStop){
clearInterval(obj.timer);
if(fn)fn();
}

},30);
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

JavaScript运动框架 链式运动到完美运动（五）

热门推荐

随机推荐

JavaScript运动框架链式运动到完美运动（五）