链式运动的一些思路

Posted 2020-08-09 愚小子

前面的一些运动都是只完成一种运动，完成后一般就不会在增加其他运动，在实际中可能会有多种情况，如果想要一个对象完成一个运动后，再接着完成另外一个运动，这时可以考虑用链式运动框架实现一些功能，最主要的还是在定时器封装的函数里再增加一个参数作为传值，一般这个参数是函数，下面这个小例子：

 

function setMove(obj,arr,iTarget,fun){ 　　　　　　　　//设置多个参数,第二个参数为要改变的样式,链式运动框架
var timer = null;
clearInterval(obj.timer);　　　　　　　　　　　　　　　　 //关闭当前的定时器
obj.timer = setInterval(function(){　　　　　　　　　　 //为当前div设置定时器
var iCurr=0;
if(arr==‘opacity‘){
//parseFloat()取浮点数
var iCurr = parseInt(parseFloat(getStyle(obj,arr))*100);　　　　　　 //透明度单独处理，将小数转换成整数
}else{
var iCurr = parseInt(getStyle(obj,arr)); 　　　　　　　　　　　　　　 //这里就是获取的当前div的宽度
}
var iSpeed = (iTarget-iCurr)/15;
iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);　　　　　　 //将当前的速度转化成整型值
//Math.ceil向上取整，Math.floor向下取整
if(iCurr==iTarget){
clearInterval(obj.timer); 　　　　　　　　　　　　　　　　　　　　　　//清除当前div的定时器
if(fun){ 　　　　　　　　　　　　　　　　　　　　　　　　　　　　 //先检测是否有这个参数，有的话就执行，否则就不执行
fun();　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 //在每次一个运动完成后，又执行这个运动，依次进行
}
}else{
if(arr==‘opacity‘){
obj.style.fliter = ‘alpha(:‘+(iCurr+iSpeed)+‘)‘;　　　　　　　　　　　　 //这里是用整数表示
obj.style.opacity = (iCurr+iSpeed)/100; 　　　　　　　　　　　　　　   //这里使用小数表示
}
obj.style[arr]= iCurr+iSpeed+‘px‘;　　　　　　　　　　　　　　　　 //将div的宽以一定速度增加
}
},50);

上面这段小代码就是加入了一个函数作为参数的运动的函数实体，这样可以在每次运动完成后，在接着完成另外一个运动，用这样一个小框架基本能实现。

 

如下面这这个小例子，用函数作为一个参数：

<script type="text/javascript">
window.onload = function()
{
var oDiv1 = document.getElementById("div1");
var oDiv2 = document.getElementById("div2");
var oDiv3 = document.getElementById("div3");
oDiv1.onmouseover = function(){
setMove(oDiv2,‘left‘,80,function(){
oDiv3.style.display="block";　　　　　　　　　　　　　　 //在运动之前，要先将它展现出来
setMove(oDiv3,‘top‘,50); 　　　　　　　　　　　　　　 //用到了定位
});
};
oDiv3.onclick = function(){
setMove(oDiv3,‘top‘,-200,function(){ 　　　　　　　　//点击的时候做反向运动
setMove(oDiv2,‘left‘,-150);
})
};
};
</script>

当然会有更多这方面的应用，可以提供一些思路