封装多个属性的运动框架

最新推荐文章于 2021-12-10 16:05:03 发布

yx912

最新推荐文章于 2021-12-10 16:05:03 发布

阅读量336

点赞数

CC 4.0 BY-SA版权

分类专栏： js代码笔记

本文链接：https://blog.youkuaiyun.com/qq_36400099/article/details/52877616

js代码笔记专栏收录该内容

2 篇文章

订阅专栏

1、多个属性封装运动框架：
        function curStyle(obj,attr){
            if(obj.currentStyle){
                return obj.currentStyle[attr];
            }else{
                return window.getComputedStyle(obj,null)[attr];
            }
        }
        /*obj:运动的对象
        **json:传入的数据，eg:{width:200,opacity:50,zIndex:3}
        */
        function animate(obj,json,fn) {
            clearInterval(obj.timer);
            obj.timer = setInterval(function () {
                var flag=true;
                for(var key in json){
                    //盒子运动
                    var current= 0;
                    if(key=="opacity"){
                        //Ie6,7,8没有设置透明度，默认为undefined
                        current =Math.round(parseInt(curStyle(obj,key)*100))||1;
                        //console.log(current);
                    }else{
                        current= parseInt(curStyle(obj,key));
                    }

                    var step = (json[key]-current)/10;
                    step = step>0?Math.ceil(step):Math.floor(step);
                    if(key=="opacity"){
                        if("opacity" in obj.style){
                            console.log(current+step);
                            obj.style.opacity = (current+step)/100;
                        }else{
                            //兼容ie6，7，8
                            obj.style.filter = "alpha(opacity ="+(current+step)*10+")";
                        }
                    }else if(key=="zIndex"){
                        obj.style[key] =json[key];
                    }else
                    {
                        obj.style[key] = current+step+"px";
                    }

                    if(current!=json[key]){
                        flag =false;
                    }
                }
                if(flag){
                    clearInterval(obj.timer);
                    if(fn){
                      fn();
                    }
                }
            },20)

        }