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

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

  • 相关阅读:
    C++中的friend函数详细解析(一)
    【图像处理算法】 直方图均衡化
    可降水量W:空中水文学名词初集(4)
    excel\docx
    WebService学习总结
    C#深入学习笔记Lock
    事件Event深入总结
    C#泛型委托与Lambda总结
    SQLServer事务与锁的基础概念总结
    委托Delegate深入总结
  • 原文地址:https://www.cnblogs.com/CharlieLau/p/4488019.html
Copyright © 2011-2022 走看看