js 运动框架-轻量级

最新推荐文章于 2024-10-10 22:04:37 发布

dongkaoji0964

最新推荐文章于 2024-10-10 22:04:37 发布

阅读量91

点赞数

文章标签： json

原文链接：http://www.cnblogs.com/CharlieLau/p/4488019.html

版权

　　具体代码如下：

function move(obj,json,sv,fnEnd){
    //CSS样式值
    function getStyle(obj,attr){
        if(obj.currentStyle) {return obj.currentStyle[attr];}
        else {return getComputedStyle(obj,false)[attr];}
    }
    //运动         
    clearInterval(obj.timer);
    obj.timer=setInterval(function(){
        var isAllCompleted=true; //假设全部运动都完成了
        for(attr in json){
        var attrValue=0;
            switch(attr){
                case 'opacity':
                attrValue=Math.round(parseFloat(getStyle(obj,attr))*100);break;
                default:
                attrValue=parseInt(getStyle(obj,attr));
            }
            //默认速度4
            var speed=(json[attr]-attrValue)/(sv||4); 
            speed=speed>0?Math.ceil(speed):Math.floor(speed);
            //如果循环过程中存在尚未结束的运动，isAllCompleted为假
            if(attrValue!=json[attr]) isAllCompleted=false; 
            switch(attr){
                case 'opacity': {
                    obj.style.filter="alpha(opacity="+(attrValue+speed)+")";
                    obj.style.opacity=(attrValue+speed)/100;
                }; break;
                default:obj.style[attr]=attrValue+speed+'px';
            }                   
        }//for in end!
        //所有循环结束后，只有当全部运动结束后（isAllCompleted=true）时才关闭定时器
        if(isAllCompleted){ 
            clearInterval(obj.timer);
            if(fnEnd) fnEnd();
        }   
    },30);
}

　　运动框架： move(obj,propertiesJson,speed,fnCallBack)
　　　　obj：运动物体
　　　　propertiesJson：运动属性和运动目标值的json集合，{'opacity':100}
　　　　speed：运动的速度，speed-value,值越小速度越大
　　　　fnCallBack：运动结束后的回调函数

　　此框架可以实现多个参数，多个物体运动互不影响。

转载于:https://www.cnblogs.com/CharlieLau/p/4488019.html