原生js實現fadein 和 fadeout淡入淡出效果

2019-11-20 14:51:58

字體：大中小

來源：轉載

供稿：網友

js里面設置DOM節點透明度的函數屬性：filter= "alpha(opacity=" + value+ ")"（兼容ie）和opacity=value/100（兼容FF和GG）。

先來看看設置透明度的兼容性代碼：

 
function setOpacity(ele, opacity) { 
if (ele.style.opacity != undefined) { 
///兼容FF和GG和新版本IE 
ele.style.opacity = opacity / 100; 

} else { 
///兼容老版本ie 
ele.style.filter = "alpha(opacity=" + opacity + ")"; 
} 
} 

關于有的小伙伴這樣寫：

復制代碼代碼如下:

 
function setOpacity(ele, opacity) { 
if (document.all) { 
///兼容ie 
ele.style.filter = "alpha(opacity=" + opacity + ")"; 
} 
ele { 
///兼容FF和GG 
ele.style.opacity = opacity / 100; 
} 
} 

我想說這樣在IE10下運行有問題，點了之后沒反應。因為IE10支持opacity屬性不支持filter了，這個方法不可取。

fadein 函數代碼：

復制代碼代碼如下:

 
function fadein(ele, opacity, speed) { 
if (ele) { 
var v = ele.style.filter.replace("alpha(opacity=", "").replace(")", "") || ele.style.opacity; 
v < 1 && (v = v * 100); 
var count = speed / 1000; 
var avg = count < 2 ? (opacity / count) : (opacity / count - 1); 
var timer = null; 
timer = setInterval(function() { 
if (v < opacity) { 
v += avg; 
setOpacity(ele, v); 
} else { 
clearInterval(timer); 
} 
}, 500); 
} 
} 

fadeout 函數代碼：

復制代碼代碼如下:

 
function fadeout(ele, opacity, speed) { 
if (ele) { 
var v = ele.style.filter.replace("alpha(opacity=", "").replace(")", "") || ele.style.opacity || 100; 
v < 1 && (v = v * 100); 
var count = speed / 1000; 
var avg = (100 - opacity) / count; 
var timer = null; 
timer = setInterval(function() { 
if (v - avg > opacity) { 
v -= avg; 
setOpacity(ele, v); 
} else { 
clearInterval(timer); 
} 
}, 500); 
} 
} 

下面給一個demo示例：

復制代碼代碼如下:

 
<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title></title> 
<script type="text/javascript" src="fade.js"></script> 
<script type="text/javascript"> 

window.onload = function () { 


document.getElementById('Button1').onclick = function () { 

fadeout(document.getElementById('DV'), 0, 6000); 

} 
document.getElementById('Button2').onclick = function () { 

fadein(document.getElementById('DV'), 80, 6000); 

} 
} 
</script> 
</head> 
<body> 

<div id="DV" style="background-color: green; width: 400px; height: 400px;"></div> 
<input id="Button1" type="button" value="button" /> 
<input id="Button2" type="button" value="button" /> 

</body> 
</html> 