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

来源:互联网 发布:淘宝助理快递单背景图 编辑:程序博客网 时间:2024/05/18 21:40


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 0
原创粉丝点击