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 >