js的完美运动框架

这算是比较完整的运动框架了，底下注释大部分都解释清楚了。

为什么 startMove(obj,json,fnEnd) 这里用了json，是因为为了让obj，运动时，里面的样式都同时改变。

后面的 fnEnd 函数，是指当对象运动完之后，让别的obj或者自身的obj再做相应的运动。
如图：

运动框架代码

function getClass(obj,name){            //获取对象样式的值
    if(obj.currentStyle)
        return obj.currentStyle[name];            //IE下
    else
        return getComputedStyle(obj,false)[name];           //Chrome FF
}

function startMove(obj,json,fnEnd){
    clearInterval(obj.timer);       //防止重复点击
    obj.timer = setInterval(function(){
        var bStop = true;               //定义这个变量是为了，让全部都运动完成，才关闭定时器

        for(var attr in json){
            var cur = 0;
            if(attr == 'opacity')           //样式是opacity 取小数
                cur = Math.round(parseFloat(getClass(obj,attr))*100);
            else
                cur = parseInt(getClass(obj,attr));
            speed = (json[attr] - cur)/10;
            speed = speed>0?Math.ceil(speed):Math.floor(speed);     //缓冲运动必须取整

            if(cur != json[attr])
                bStop = false;
            if(attr == 'opacity'){
                obj.style[attr] = (cur+speed)/100;
                obj.style.fliter = 'alpha(opacity:'+(cur+speed)+')';
                // document.getElementById('txt').value = obj.style[attr];
            }
            else
                obj.style[attr] = cur +speed +'px';
        }
        if(bStop){
            clearInterval(obj.timer);
            if(fnEnd) fnEnd();            
        }
    },20)
}

函数使用

oBtn.onclick=function ()
	{
		startMove(oDiv, {width: 300, height: 300, opacity: 100}, function (){
			alert('a');
		});
	};