原生Js实现元素渐隐/渐现(原理为修改元素的css透明度)

146 阅读 0 评论 97 点赞

我是靠谱客的博主开朗书本，最近开发中收集的这篇文章主要介绍原生Js实现元素渐隐/渐现(原理为修改元素的css透明度)，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

经常看到网页里图片渐变显示，自己写一个。
原理很简单就是修改元素的css透明度。
在线预览效果：http://jsfiddle.net/dtdxrk/BHUp9/embedded/result/

复制代码代码如下:

 
<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<title>原生Js元素渐隐/渐显方法</title> 
</head> 
<body> 
<button id="show">渐显</button> 
<button id="hiden">渐隐</button> 
<img src="http://www.uoften.com/uploadfile/2018/0411/20180411010042322.jpg" id="img"> 
<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> 