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];
}
}
本文介绍了一种使用JavaScript定时器实现元素平滑过渡动画的方法。通过定义`changeAttrValue`函数来逐步更改DOM元素的样式属性,实现了从初始值到目标值的平滑变化效果。此外,还提供了一个辅助函数`getAttrValue`用于获取当前元素样式的实际数值。
965

被折叠的 条评论
为什么被折叠?



