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];
        }
    }
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值