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];
}
}