JavaScript 实现元素淡入淡出与属性获取设置
作者:木棉时间:2026-10-30 05:58:03浏览:77
本文介绍两种JavaScript常用功能:通过setInterval定时器递增opacity实现元素淡入淡出效果,以及利用currentStyle和getComputedStyle兼容获取和设置DOM元素属性值的方法。
实现元素淡入淡出动画
1. 模拟实现 fade in() 和 fade out() 动画效果。
核心原理:利用 setInterval 函数,通过指定时间间隔不断执行增加 opacity(透明度)的函数逻辑。
var alpha = 0;
function play(){
timer = setInterval(function(){
alpha += 2;
alpha > 100 && (alpha = 100);
aImg[index].style.opacity = alpha / 100;
aImg[index].style.filter = "alpha(opacity = " + alpha/100 + ")";
alpha == 100 && clearInterval(timer);
},40)
}
元素属性获取与设置方法
2. 实现获取和设置元素对象的属性值。
关键实现点:需兼容处理 obj.currentStyle[attr] 以及 getComputedStyle(obj, null)[attr]。
function css(obj,attr,val) {
switch(arguments.length) {
case 2:
if(typeof arguments[1] == "string"){
return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj,null)[attr];
}else{
for(var i in attr) {
obj.style[i] = attr[i];
}
}
break;
case 3:
obj.style[attr] = val;
break;
default:
alert("错误参数");
}
}
以上所述是小编给大家介绍的JS功能代码集锦的相关内容,希望对大家有所帮助!
作者最新文章
JS合并多个数组的三种方法:concat、spread与flat
2026-11-05 17:39:45
JavaScript怎么准确判断数据类型:typeof、instanceof与Object.prototype.toString
2026-11-05 17:09:21
JS中将数组和对象混合组装为JSON字符串
2026-11-05 16:41:42
JS运算符优先级与结合性的区别是什么?
2026-11-05 13:22:02
JS Map怎么只遍历Key或Value
2026-11-05 13:00:36
