首页 > 代码库 > （43）JS运动之链式运动框架
（43）JS运动之链式运动框架
链式运动框架就是一系列的运动分阶段进行，在普通的运动框架上加上一个參数function，这个function表示下一个要运行的动作。详细代码例如以下：
<!DOCTYPE HTML>
<!--链式运动框架：运动分阶段进行，当运动停止的时候。运行下一个运动-->
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#div1 {width:100px;height:100px;background:red;filter:alpha(opacity:30);opacity:0.3}
</style>
<script>
window.onload=function ()
{
var oDiv=document.getElementById('div1');//先获取div元素
oDiv.onmouseover=function ()
{
startMove(oDiv,'width',300,function(){//先是宽变300
startMove(oDiv,'height',300,function(){//当宽变300的时候，即运动结束时候开启还有一个运动，使其高变为300
startMove(oDiv,'opacity',100);//使透明度变成100，原来是30
});
});
};
oDiv.onmouseout=function ()//当鼠标移出的时候，跟移进的时候效果相反就可以。
{
startMove(oDiv,'opacity',30,function(){
startMove(oDiv,'height',100,function(){
startMove(oDiv,'width',100);
});
});
};
};//下面是运动框架的内容
function getStyle(obj, name)
{
if(obj.currentStyle)
{
return obj.currentStyle[name];
}
else
{
return getComputedStyle(obj, false)[name];
}
}
function startMove(obj, attr, iTarget, fnEnd)//比普通的运动框架写多了一个函数，说明下一阶段要运行的运动
{
clearInterval(obj.timer);
obj.timer=setInterval(function (){
var cur=0;
if(attr=='opacity')
{
cur=Math.round(parseFloat(getStyle(obj, attr))*100);
}
else
{
cur=parseInt(getStyle(obj, attr));
}
var speed=(iTarget-cur)/6;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(cur==iTarget)
{
clearInterval(obj.timer);
if(fnEnd)fnEnd();
}
else
{
if(attr=='opacity')
{
obj.style.filter='alpha(opacity:'+(cur+speed)+')';
obj.style.opacity=(cur+speed)/100;
}
else
{
obj.style[attr]=cur+speed+'px';
}
}
}, 30);
}
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
效果图：当鼠标移进的时候，先横向变宽，再纵向变高。最后透明度变成100，效果例如以下：
当鼠标移出的时候。效果刚好和上面相反：
（43）JS运动之链式运动框架