前面介绍的运动都是一个物体运动之后就结束了，如果一个物体运动之后，还有其他的操作，比如一个div先变宽，然后变高、最后变透明度，我们前面的运动框架就不满足情况了。我们可以在运动框架的基础上，在加上一个fnEnd函数，当运动执行完成之后执行的操作。
链式运动框架
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);//有可能会出现误差0.07*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();//运动结束后，如果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)
}
链式运动例子
我们用上面的链式运动框架做一个div先运动调整宽度，再运动调整高度，最后 运动调整透明度。
<!DOCTYPE html>
<html>
<head>
<title>链式运动</title>
<script src="move2.js"></script>
<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");
oDiv.onmouseover=function(){
startMove(oDiv,"width",300,function(){
startMove(oDiv,"height",300,function(){
startMove(oDiv,"opacity",100);
})
})
}
oDiv.onmouseout=function(){
startMove(oDiv,"opacity",30,function(){
startMove(oDiv,"height",100,function(){
startMove(oDiv,"width",100);
})
});
}
}
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
扫一扫
182
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
