js运动框架的封装

不负好时光丶砥砺新时代

于 2021-09-02 08:29:19 发布

阅读量171

点赞数

文章标签： javascript html css

本文链接：https://blog.youkuaiyun.com/Hello_yhr/article/details/120052981

版权

// 适配所有移动变化
        // div 节点，target：对象
        function startmves(div,target){
            var times=null;
            var speed=null;
            var op=null;
            return function(){
                    clearInterval(div.times);
                    var flag=true;
                    div.times=setInterval(function(){
                        for(var prop in target){
                            if(prop==='opacity'){
                                op=getComputedStyle(div)['opacity']*100;
                            }else{
                                op= +getComputedStyle(div)[prop].slice(0,-2);
                                
                            }
                            speed=(target[prop]-op)/6;
                            console.log(target[prop])
                            speed= speed >0 ? Math.ceil(speed) : Math.floor(speed);
                            if(prop=='opacity'){
                            div.style.opacity=(op+speed)/100;
                            }else{
                                div.style[prop]= op+speed+'px';
                                console.log(op)
                            }
                            if(op!==target[prop]){
                            flag=false;
                            }
                        }
                       if(flag){
                        clearInterval(div.times);
                        // typeof callback === 'function' && callback();
                       }
                    },60)
            }
        }

适配改变多个样式的变化。