[Javascript] 实现div层渐隐效果..

代码

< html >
< head >
     < title > Test Alpha </ title >
     < link  rel ="stylesheet"  type ="text/css"  href ="style.css"   />
     < script  type ="text/javascript"  src ="index.js" ></ script >
     < style  type ="text/css" >
    #show  {
        background : #ffff66 ;
        font-size : 12px ;
        height : 200px ;
        width : 300px ;
        left : 300px ;
        position : absolute ;
        text-align : center ;
        filter : alpha(opacity=0) ;
     }
     </ style >
</ head >
< body  onload ={document.getElementById('show').style.opacity=0;} >
< div  id ="show" ></ div >
< button  onclick =fun() > button </ button >
</ body >
< script >
function  fun(){
     var  div = document.getElementById( ' show ' );
      div.style.opacity = 1 ;
      hidden(document.getElementById( " show " ), 1 , - 0.01 );
}
function  hidden(o,i,s){
    t = setInterval( function (){   
    i += s;
    o.style.opacity = i;
     if (i < 0 )window.clearInterval(t); 
    }, 1 );   
};
</ script >
</ html >