JavaScript实现滑动折叠

 

<style>
td{font-size:9pt;cursor:hand;}
</style>
<table width="100" border="0" cellspacing="0" cellpadding="0" id="SHArea">
    <tr>
        <td align="center">
        <table width="100%" border="1" cellpadding="0" cellspacing="0" bordercolor="#FFFFFF" >
                    <tr>
                        <td height="18" align="center" bordercolor="#0099FF" bgcolor="#0099FF" onmouseOver="MouseOver(this)"><font color="#FFFFFF">测试1</font></td>
                    </tr>
                    <tr>
                        <td align="center" bordercolor="#FFFFFF">
                        <div>
                            <table width="100%" border="1" cellpadding="0" cellspacing="1" bordercolor="#FFFFFF">
                              <tr>
                                <td align="center" bordercolor="#CCCCCC">1</td>
                              </tr>
                              <tr>
                                <td align="center" bordercolor="#CCCCCC">2</td>
                              </tr>
                              <tr>
                                <td align="center" bordercolor="#CCCCCC">3</td>
                              </tr>
                              <tr>
                                <td align="center" bordercolor="#CCCCCC">4</td>
                              </tr>
                              <tr>
                                <td align="center" bordercolor="#CCCCCC">5</td>
                              </tr>
                              <tr>
                                <td align="center" bordercolor="#CCCCCC">6</td>
                              </tr>
                              <tr>
                                <td align="center" bordercolor="#CCCCCC">7</td>
                              </tr>
                              <tr>
                                <td align="center" bordercolor="#CCCCCC">8</td>
                              </tr>
                              <tr>
                                <td align="center" bordercolor="#CCCCCC">9</td>
                              </tr>
                          </table>
                        </div>
                        </td>
                    </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td align="center">
        <table width="100%" border="1" cellpadding="0" cellspacing="0" bordercolor="#FFFFFF">
          <tr>
            <td height="18" align="center" bordercolor="#0099FF" bgcolor="#0099FF" onmouseOver="MouseOver(this)"><font color="#FFFFFF">测试2</font></td>
          </tr>
          <tr>
            <td align="center" bordercolor="#FFFFFF"><div>
                <table width="100%" border="1" cellpadding="0" cellspacing="1" bordercolor="#FFFFFF">
                  <tr>
                    <td align="center" bordercolor="#CCCCCC">1</td>
                  </tr>
                  <tr>
                    <td align="center" bordercolor="#CCCCCC">2</td>
                  </tr>
                  <tr>
                    <td align="center" bordercolor="#CCCCCC">3</td>
                  </tr>
                  <tr>
                    <td align="center" bordercolor="#CCCCCC">4</td>
                  </tr>
                  <tr>
                    <td align="center" bordercolor="#CCCCCC">5</td>
                  </tr>
                  <tr>
                    <td align="center" bordercolor="#CCCCCC">6</td>
                  </tr>
                </table>
            </div></td>
          </tr>
        </table></td>
    </tr>
    <tr>
      <td align="center"><table width="100%" border="1" cellpadding="0" cellspacing="0" bordercolor="#FFFFFF">
        <tr>
          <td height="18" align="center" bordercolor="#0099FF" bgcolor="#0099FF" onmouseOver="MouseOver(this)"><font color="#FFFFFF">测试3</font></td>
        </tr>
        <tr>
          <td align="center" bordercolor="#FFFFFF"><div>
              <table width="100%" border="1" cellpadding="0" cellspacing="1" bordercolor="#FFFFFF">
                <tr>
                  <td align="center" bordercolor="#CCCCCC">1</td>
                </tr>
                <tr>
                  <td align="center" bordercolor="#CCCCCC">2</td>
                </tr>
                <tr>
                  <td align="center" bordercolor="#CCCCCC">3</td>
                </tr>
                <tr>
                  <td align="center" bordercolor="#CCCCCC">4</td>
                </tr>
                <tr>
                  <td align="center" bordercolor="#CCCCCC">5</td>
                </tr>
                <tr>
                  <td align="center" bordercolor="#CCCCCC">6</td>
                </tr>
                <tr>
                  <td align="center" bordercolor="#CCCCCC">7</td>
                </tr>
              </table>
          </div></td>
        </tr>
      </table></td>
    </tr>
</table>
<script>
var field = document.all.item("SHArea");
var scrollSpeed = 8; //滑动速度
var scrollASpeed = 0; //滑动加速度
var scrollRate = 10; //滑动间隔(毫秒)
//var controlready = true;//防止滑动期间引起其他滑动


    function window.onload()
    {
        if(scrollSpeed==0 && scrollASpeed==0)scrollSpeed=5;//判断如果滑动速度和加速度都为0 则滑动速度设定为5
        for(var i=0;i<field.cells.length;i++) //读取没个DIV的实际高度
        {
            var tempObj = field.cells[i].children[0].cells[1].children[0];
            tempObj.setAttribute("defaultHeight",tempObj.offsetHeight);
            tempObj.parentElement.parentElement.style.display = "none"
            tempObj.style.overflowY = "hidden";//没设定DIV.style.overflow-y的属性时使用
        }
    }

    function MouseOver(incomingobj)
    {
        //if(!controlready){return;}
        var hiddenObj=null;
        var showObj=null;
        showObj = incomingobj.parentElement.parentElement.rows[1].children[0].children[0];
        for(var i=0;i<field.cells.length;i++)
        {
            hiddenObj = field.cells[i].children[0].cells[1].children[0];
            
            if(hiddenObj != showObj)
            {
                if(hiddenObj.parentElement.parentElement.style.display == "")
                {
                    //controlready = false;
                    movehidden(hiddenObj.sourceIndex,hiddenObj.defaultHeight,scrollSpeed);
                }
                
            }
            else
            {
                if(hiddenObj.parentElement.parentElement.style.display == "none")
                {
                    showObj.parentElement.parentElement.style.display = "";
                    showObj.style.height = 1;
                    moveshow(showObj.sourceIndex,1,scrollSpeed);
                }
            }
        }
    }
    
    function moveshow(objIndex,tempint,offint)
    {
        var showObj = document.all.item(objIndex);
        if(tempint < showObj.defaultHeight)
        {
            offint = offint + scrollASpeed;  
            var nowheight = tempint + offint;
            showObj.style.height = nowheight;
            setTimeout("moveshow(" + objIndex + "," + nowheight + "," + offint + ")",scrollRate);
        }
        else
        {
            showObj.style.height = showObj.defaultHeight;
            //controlready = true;
        }
    }
    
    function movehidden(objIndex,tempint,offint)
    {
        var hiddenObj = document.all.item(objIndex);
        if(tempint > 1)
        {
            offint = offint + scrollASpeed;  
            nowheight = tempint - offint;
            if(nowheight <= 0)nowheight = 1;
            hiddenObj.style.height = nowheight;
            setTimeout("movehidden(" + objIndex + "," + nowheight + "," + offint + ")",scrollRate);
        }
        else
        {
            hiddenObj.parentElement.parentElement.style.display = "none";
            //controlready = true;
        }
    }

</script>