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

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

  • 相关阅读:
    STL源代码剖析——STL算法之set集合算法
    iOS + Nodejs SSL/Https双向认证
    C语言将10进制转为2进制
    图的遍历算法
    Web—CSS概述
    苹果新的编程语言 Swift 语言进阶(八)--属性
    UVa 10700
    C++实现KMP模式匹配算法
    软件project
    oralce GROUPING SETS
  • 原文地址:https://www.cnblogs.com/CharlieLau/p/4488019.html
Copyright © 2011-2022 走看看