原生JavaScript实现元素渐隐与渐显效果

原生JavaScript实现元素渐隐与渐显效果

经常看到网页中图片以渐变方式显示，这里尝试自行编写一个实现方案。

其核心原理非常直接，即通过动态修改元素的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://images.cnitblog.com/blog/150659/201306/20171658-303d375a1ec740e29a567b269d6297f1.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>