div 缓慢下拉效果

<! DOCTYPE html PUBLIC  " -//W3C//DTD XHTML 1.0 Transitional//EN "   " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd " >
< html xmlns = " http://www.w3.org/1999/xhtml "  lang = " en "  xml:lang = " en " >  
< head >
< title > 关闭 / 展开 </ title >
< meta http - equiv = " Content-Type "  content = " text/html; charset=gb2312 "   />
< meta http - equiv = " imagetoolbar "  content = " no "   />
< style type = " text/css "  media = " screen " >
* ,html{
margin: 0 ;
padding: 0 ;
}
body {
text - align: center;
margin:  0  auto;
padding:  0 ;
height:  100 % ;
color: #0369cb;
font:  76 %/ 1 .6em 宋体,Verdana,Tahoma,Arial,sans - serif;
background - color: #efefef; 
}
#container {
width: 800px;
margin:  0  auto;
padding:  0 ;
text - align: center;
margin - top: 6px;
margin - bottom: 16px;
}
#container a{
position:relative;
text - decoration: none;
bottom:0px;
width: 99.9 % ;
}
#container a:hover {
color: # 000000 ;
text - decoration: none;
}
#box {
display: none;
width:  99.9 % ;
height:1px;
overflow:hidden;
border: 1px solid #FFF;
background: # 000000  url(bg.gif) top left repeat;
filter:alpha(opacity = 2 );
}
</ style >
< script type = " text/javascript "  language = " javascript " >

var timer  =   10 ;    // 计时器时钟
var HeightEnd = 400 ; // Div高度
var aNum  =   20 ;    // 步进速度
var isOpen  =   false ; // 层状态 打开还是关闭 默认关闭
function $(name){ return  document.getElementById(name);}
function voids() {
setTimeout( " extend() " , 66 );
}


//  展开/关闭
function extend(){
var tHeight  =  parseInt(gs($( " box " ), " height " ));
if ( ! isOpen){
   $( " box " ).style.display = " block " ;
    if  (tHeight < HeightEnd){
    $( " box " ).style.height = (tHeight + aNum) + " px " ;
    $( " box " ).filters.alpha.opacity += 3 ;
    setTimeout( " extend() " ,timer);
   } else {
    isOpen = true ;  // 打开状态
    $( " tabTop " ).innerHTML  =   " 关闭 " ;
    $( " box " ).filters.alpha.opacity = 100 ;
   }
} else {
    if ((tHeight - aNum) > 0 ){
    $( " box " ).style.height = (tHeight - aNum) + " px " ;
    $( " box " ).filters.alpha.opacity -= 5 ;
    setTimeout( " extend() " ,timer);
   } else {
    isOpen = false ;  // 关闭状态
    $( " box " ).style.display = " none " ;
    $( " tabTop " ).innerHTML  =   " 展开 " ;
    $( " box " ).filters.alpha.opacity = 2 ;
   }
}
}

function gs(d,a){
if  (d.currentStyle){ 
    var curVal = d.currentStyle[a]
} else { 
    var curVal = document.defaultView.getComputedStyle(d,  null )[a]
} 
return  curVal;
}
</ script >
</ head >
< body >
< div id = " container " >
< div id = " box " >
   测试..测试. < br >< br >  
    < p > 再次测试.. </ p >
    < p > 测试下拉效果 </ p >
</ div >
< a id = " tabTop "  onfocus = " this.blur(); "  href = " javascript:voids('box'); " > 展开 </ a >
</ div >
</ body >
</ html >