您的位置:首页 > 其它

完美运动框架全面剖析

2017-04-26 20:45 155 查看
源码:

function perfect(obj,josn,fn){

            clearInterval(obj.timer);//清除定时器

            var flag=true;//用于判断是否全部动画执行完成

            obj.timer=setInterval(function(){
                for(var attr in josn) {

                   //取当前值

                    var off = 0;

                    if (attr == 'opacity') {

                        off = Math.round(parseFloat(getStyle(obj, attr)) * 100);

                    }

                    else {

                        off = parseInt(getStyle(obj, attr));
                    }

                   //算速度

                    var speed = (josn[attr] - off) / 8;
                    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); //取整

                   //停止检测

                    if (off != josn[attr]) {

                        flag=false;

                    }

                        if (attr == 'opacity') {

                            obj.style.filter = 'alpha(opacity:' + (off + speed) + ')';

                            obj.style.opacity = (off + speed) / 100;

                        } else {

                            obj.style[attr] = off + speed + 'px';

                        }

                    }

                if(flag){

                    clearInterval(obj.timer);

                    if (fn) {

                        fn();

                    }

                }

            },20)
        }

         //取元素样式函数

        function getStyle(obj,att){

            if(obj.currentStyle){

                return obj.currentStyle[att];//IE

            }

            else{

                return getComputedStyle(obj,false)[att];//WebKit

            }
        }
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  框架 函数 源码