今天读到一篇关于用CSS实现渐显效果的文章，觉得很有意思，想试一试，但是没有给具体的实现例子， 从网上也找了些资料，实现方法各不相同，我自己也实现了一个可以定时渐显的例子，拿出来与大家共享，下面是html文件的源码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Author" CONTENT="Pure Zhou">
<META NAME="Description" CONTENT="">
<style>
.visibility_s{diplay:block;width:464px;height:277px;visibility:visible;}
.visibility_h{diplay:none;width:0px;height:0px;visibility:hidden;}
.revealTrans{filter:revealTrans(Transition=10,Duration=2.0);}
.display_h{diplay:none;}
.display_s{diplay:block;}
</style>
<script>
function init() {
}
function play() {
var n = parseInt(Math.random()*(23-0+1) + 0);
if (img1.className == 'visibility_h revealTrans') {
img2.className = 'visibility_h revealTrans'
img1.filters.item(0).apply();
img1.className = 'visibility_s revealTrans'
img1.filters.item(0).transition = n;
img1.filters.item(0).play();
} else {
img1.className = 'visibility_h revealTrans'
img2.filters.item(0).apply();
if (img2.className == 'visibility_h revealTrans') {
img2.className = 'visibility_s revealTrans'
} else {
img2.className = 'visibility_h revealTrans'
}
img2.filters.item(0).transition = n;
img2.filters.item(0).play();
}
window.setTimeout("play();", 3000 );
}
</script>
</HEAD>
<BODY οnlοad="init();">
<TABLE>
<TR align="center">
<TD width='464px' height='277px'><div id="divparent" class='revealTrans'>
<div id="div1" class="display_h"><IMG id="img1" SRC="images/33-1.gif" class="visibility_s revealTrans"></IMG></div>
<div id="div2" class="display_s"><IMG id="img2" SRC="images/Tabbuttonbg.gif" class="visibility_h revealTrans"></IMG></div>
</div>
</TD>
<TD><!-- input id="btn1" type='button' value="play" οnclick='play();' --></TD>
</TR>
</TABLE>
</BODY>
</HTML>
<script>
play();
</script>
如果你想试验一下，记得找两幅图片，并修改一下上面的代码，不多说了，试一下就知道了，效果还不错。
本人CSS和javascript还是初学，如果有可以改进的地方，希望大家不吝赐教，谢谢，期望与您的交流。
