JS完美运动框架

大家好 我是过往云烟  这几天写了一个 JS运动框架,基本上和JQ封装好的动画方法类似  可以改变透明度  高度宽度  字体大小 等等 很多值,原生态JS写的  而且还支持回调函数,可谓是功能应有尽有啊
下面是框架的源码

function getStyle(obj, attr)
{
    if(obj.currentStyle)
    {
        return obj.currentStyle[attr];
    }
    else
    {
        return getComputedStyle(obj, false)[attr];
    }
}

function startMove(obj, json, fn)
{
    clearInterval(obj.timer);
    obj.timer=setInterval(function (){
        var bStop=true;        //这一次运动就结束了——所有的值都到达了
        for(var attr in json)
        {
            //1.取当前的值
            var iCur=0;
           
            if(attr=='opacity')
            {
                iCur=parseInt(parseFloat(getStyle(obj, attr))*100);
            }
            else
            {
                iCur=parseInt(getStyle(obj, attr));
            }
           
            //2.算速度
            var iSpeed=(json[attr]-iCur)/8;
            iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
           
            //3.检测停止
            if(iCur!=json[attr])
            {
                bStop=false;
            }
           
            if(attr=='opacity')
            {
                obj.style.filter='alpha(opacity:'+(iCur+iSpeed)+')';
                obj.style.opacity=(iCur+iSpeed)/100;
            }
            else
            {
               
                obj.style[attr]=iCur+iSpeed+'px';
            }
        }
       
        if(bStop)
        {
            clearInterval(obj.timer);
           
            if(fn)
            {
                fn();
            }
        }
    }, 30)
}

 

 




调用的话   就直接把这2个函数放到一个JS文件里面   第一个函数是获取样式的 第二个函数是运动框架本身    获取样式 是JSON格式  比如要改变一个DIV的宽度  可以这样写
startMove('div',{width:100});
如果改变多个值可以这样
startMove('div',{width:100,height:200});
同时还支持链式运动 
startMove(div,{width:100,height:100},function(){
  startMove(div,{opacity:20});
});
这样就可以 先改变高度宽度 然后在改变透明度

posted @ 2012-06-24 19:54  梁天  阅读(900)  评论(1编辑  收藏  举报