关于完美运动框架的一些思路
前面介绍了几个运动框架，但在实际中，有时不想运动一个接一个，而是希望多个属性同时变化，这时上面的那几个框架可能需要做出一些调整，这里我们又要接触一个比较实用的方法，就是json，json有点类似于数组，可以存储多个值，而且能进行遍历,如：
var oJson = { a:12,b:15,c:20};
for( arr in oJson){ //对json进行遍历，注意json这能用 for in 进行遍历，没有.length 属性
alert(oJson[arr]);
}
有了上面这个思路，我么可以将json作为一个参数传给前面的setMove()函数作为传值参数，这样用户也能同时改变多个值。看下面这个小例子：
function getStyle(obj,arr){ //两个参数，第一个是获取谁的，第二个时什么样式
if(obj.currentStyle){
return obj.currentStyle[arr];
}else{
return getComputedStyle(obj,false)[arr];
}
};
function setMove(obj,json,fun){
var timer = null;
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var iCurr=0;
for(arr in json){ //循环json只能用for in循环
if(arr=='opacity'){ //arr表示对象的属性
var iCurr = parseInt(parseFloat(getStyle(obj,arr))*100); //透明度单独处理，将小数转换成整数
}else{
var iCurr = parseInt(getStyle(obj,arr)); //这里就是获取的当前div的宽度
}
var iSpeed = (json[arr]-iCurr)/8;
iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed); //将当前的速度转化成整型值
//Math.ceil向上取整，Math.floor向下取整
if(iCurr==json[arr]){
clearInterval(obj.timer); //清除当前div的定时器
if(fun){
fun();
}
}else{
if(arr=='opacity'){
obj.style.fliter = 'alpha(:'+(iCurr+iSpeed)+')'; //这里是用整数表示
obj.style.opacity = (iCurr+iSpeed)/100; //这里使用小数表示
}else if(arr=='background'){
obj.style.background = json[arr]; //当是颜色时，单独设置
}
obj.style[arr]= iCurr+iSpeed+'px'; //将div的宽以一定速度增加
}
}
},50);
}
通过将json作为参数，可以同时改变操作对象的对象的几个属性，以前的运动是每间隔 一定时间就讲一个属性改变一下，而通过json循环，实现每间隔一定时间，同时将几个属性都改变一下，这样就可以实现多个属性同时运动的实现了。
下面这个小运动，就可以实现多个同时运动：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#div1{ width: 100px;height: 50px; background: red; }
</style>
<script src="完美框架改进move.js"></script>
<script type="text/javascript">
window.onload = function()
{
var oDiv = document.getElementById("div1");
oDiv.onmouseover = function(){
//使用json可以实现同时多个属性运动
setMove(oDiv,{width:'200',height:'200',background:'green',opacity:'30'});
//虽然同时运动，但也还是有先后顺序
};
};
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
浙公网安备 33010602011771号