js运动框架的封装(多属性,及透明度)

js运动框架封

		function move(ele,data,end){
        clearInterval(ele.t);
        ele.t = setInterval(() => {
        	//状态
            var onoff = true;
            for(var i in data){
            	var iNow=0;
            	//判断是否是透明度属性,因为透明属性需要特殊处理一下
            	if(i=="opacity"){
            		iNow=Math.round(getStyle(ele,i)*100);
            	}else{
            		iNow = parseInt(getStyle(ele,i));
            	}
               
                //步长
                var speed = (data[i] - iNow)/7;
                speed = speed<0 ? Math.floor(speed) : Math.ceil(speed);
				//如果目标不等于现在的值赋值给onoff false,判断
                if(data[i] != iNow){
                    onoff = false;
                }
                //判断是否是透明属性,兼容Ie浏览器写法。
                if(i=="opacity"){
                	ele.style.filter='alpha(opacity:'+(iNow+speed)+')';
                	ele.style.opacity=(iNow+speed)/100
                }else{
                	ele.style[i] = iNow + speed + "px";
                }
                
            }
            if(onoff){
                clearInterval(ele.t);
                end && end();
            }
        }, 30);
    }

然后再把获取行内样式的封装写出来

//获取行内样式的兼容写法
    function getStyle(ele,attr){
        if(getComputedStyle){
            return getComputedStyle(ele,false)[attr];
        }else{
            return ele.currentStyle[attr];
        }
    }

你可能感兴趣的:(js运动框架的封装(多属性,及透明度))