原生Js實現(xiàn)元素漸隱/漸現(xiàn)(原理為修改元素的css透明度)

2024-05-06 15:47:00

字體：大中小

供稿：網(wǎng)友

大家經(jīng)常看到網(wǎng)頁里圖片漸變顯示，自己寫一個。原理很簡單就是修改元素的css透明度，具體實現(xiàn)代碼如下，感興趣的各位可以參考下哈，希望對大家有所幫助

經(jīng)常看到網(wǎng)頁里圖片漸變顯示，自己寫一個。
原理很簡單就是修改元素的css透明度。
在線預(yù)覽效果：

復(fù)制代碼代碼如下:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>原生Js元素漸隱/漸顯方法</title>
</head>
<body>
<button>漸顯</button>
<button>漸隱</button>
<img src="http://m.survivalescaperooms.com/uploads/allimg/130625/111312E91_0.jpg">
<script type="text/javascript">
function alphaPlay(obj,method){ //method有兩個值show或hiden
var n = (method == "show") ? 0 : 100,
ie = (window.ActiveXObject) ? true : false;
var time = setInterval(function(){
if(method == "show"){
if(n < 100){
n+=10;
if(ie){
obj.style.cssText = "filter:alpha(opacity="+n+")";
}else{
(n==100) ? obj.style.opacity = 1 : obj.style.opacity = "0."+n;
}
}else{
clearTimeout(time);
}
}else{
if(n > 0){
n-=10;
if(ie){
obj.style.cssText = "filter:alpha(opacity="+n+")";
}else{
obj.style.opacity = "0."+n;
}
}else{
clearTimeout(time);
}
}
},30);
}
var img = document.getElementById("img");
document.getElementById("show").onclick = function(){
alphaPlay(img,"show");
}
document.getElementById("hiden").onclick = function(){
alphaPlay(img,"hiden");
}
</script>
</body>
</html>