使用定时器改变元素的样式信息


1.使用定时器改变样式信息

obj:传入对象

attrName:需要发生改变的属性名

endValue:改变之后的最终值

        function changeAttrValue(obj,attrName,endValue){
            clearInterval(obj.timer);    // 避免冒泡造成的影响
            obj.timer = setInterval(function(){
                var currentValue = getAttrValue(obj,attrName);   // 获得属性的当前值
                var speed = ( parseInt(endValue) - parseInt(currentValue) )/4;  // 设置步长
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);   // 对speed取整,注意不能取到0
                obj.style[attrName] = parseInt(currentValue) + speed + 'px';   //  设置最新获得的属性值
                if( obj.style[attrName] == endValue ){
                    clearInterval(obj.timer);  // 关闭定时器
                }
            },50);
        }

2.获得元素的样式信息

obj:传入对象

attrName:属性名

        function getAttrValue(obj,attrName){
            if( obj.currentStyle ){
                return obj.currentStyle[attrName];   // IE浏览器中的获取方法
            }else{
                return getComputedStyle(obj,null)[attrName];
            }
        }

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值