zoukankan      html  css  js  c++  java
  • js 运动框架-轻量级

      具体代码如下:

      

    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: 运动结束后的回调函数

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

  • 相关阅读:
    easyui控件写法造成的错误
    外部访问服务器数据库被防火墙屏蔽报错
    云服务器Windows Server2012 配置http服务器(又称Web服务器,IIS)
    mysql五:索引原理与慢查询优化
    mysql四:数据操作
    mysql四-2:多表查询
    sql查询作业答案
    mysql四-1:单表查询
    mysql五补充部分:SQL逻辑查询语句执行顺序
    第三篇:表操作
  • 原文地址:https://www.cnblogs.com/CharlieLau/p/4488019.html
Copyright © 2011-2022 走看看