JS完美运动框架

通过把JSON作为参数传进函数可以做到多个元素同时运动。

例如:var jSon = {width:100px,height:100px};

for(var i in jSon)

alert(i+’,’+jSon[i]);

结果是width,100px和height,100px

函数如下：

function startMove(obj,json,funEnd)
{

clearInterval(obj.timerId);
obj.timerId = setInterval(function () {
var bStop = true;   //开始的时候假设所有的条件都到达了，关掉定时器
for(var name in json)  //用for in来循环JSON内的元素.
{
var styleValue = 0;
if(name == 'opacity')  //透明度要乘以100
styleValue = Math.round(parseFloat(getStyle(obj,name))*100);//四舍五入，防止出现.000000001和.999999的情况
else
styleValue = parseFloat(getStyle(obj,name));
var speed = (json[name] - styleValue)/6;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
if(json[name] != styleValue)  //如果有某个元素的值还没运动到目标值则不能关掉定时器
bStop=false;
if(name == 'opacity')  //透明度另外处理
{
obj.style[name] = (styleValue+speed)/100;
obj.style.filter = 'alpha(opacity:'+(styleValue+speed)+')';
}
else
obj.style[name] = styleValue + speed + 'px';
}

if(bStop)  //当所有元素都达到目标值的时候关掉定时器
{
clearInterval(obj.timerId);
if(funEnd)funEnd();
}

},30);
}
//获取任意位置的样式
function getStyle(obj,name)
{
if(obj.currentStyle)
return obj.currentStyle[name];
else
return getComputedStyle(obj,false)[name];
}

例如：

startMove(this，{width:200,height:400,opacity:30,borderWidth:56});