[Web]如何实现 Div 的 伸 缩 动 态 效果

效果如下：

图一：

图二：


图三：


实现代码具体如下：(真接复制便可使用)

< html >
< head >
     < title > aa </ title >
</ head >
< body >
     < input  id ="Button1"  type ="button"  value ="展开"  onclick ="return Button1_onclick()"   />
     < input  id ="Button2"  type ="button"  value ="关闭"  onclick ="return Button2_onclick()"   />
     < div  id ="mydiv"  style ="width: 300px; height: 1px; border-right: #ff3300 1px dotted;
        border-top: #ff3300 1px dotted; border-left: #ff3300 1px dotted; border-bottom: #ff3300 1px dotted;
        background-color: #cccc66; overflow: hidden;" >
         < br  />
        内容、内容、内容、内容、内容、内容、内容、内容、内容、
         < br  />
        内容、内容、内容、内容、内容、内容、内容、内容、内容、
         < br  />
        内容、内容、内容、内容、内容、内容、内容、内容、内容、
         < br  />
     </ div >
     < span  id ="lab" ></ span >
</ body >
</ html >

< script  language ="javascript"  type ="text/javascript" >
//  <!CDATA[

var  h = 0 ;
var  obj;

function  Button1_onclick() {

     if  (h >= 200 ) 
    {
        h = 200 ;
        obj.style.height = 200 ;
         return ;
    }  
    
    obj = document.getElementById( " mydiv " );
    
    h = h + 1 ;

    obj.style.height = h;
    document.getElementById( " lab " ).innerHTML = " 图层高度： " + h;
    setTimeout( " Button1_onclick() " , 10 );    
}


function  Button2_onclick() {

     if  (h <= 1 ) 
    {   
        h = 0 ;
         return ;
    }

    obj = document.getElementById( " mydiv " );
    
    h = h - 1 ;
    
     if (h <= 1 )
    {
        h = 1
    }
    
    obj.style.height = h;    
    document.getElementById( " lab " ).innerHTML = " 图层高度： " + h;
    setTimeout( " Button2_onclick() " , 10 );
}

//  ]]>
</ script >

注意：
一、div 样式中的 overflow: hidden; 一定要有。
二、div 样式中的 height  不能小于 1，也就是说不能设为0 否则便会变成自动适应高度