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 >