就是带点动感,参考一下.
<script language="JavaScript">
var HeadHeight=22;
var BodyHeight=260;
var ObjectCount=3;
var Step=5;
var Moving=false;
function ShowMe(m_Object,m_Object_)
{
if(Moving)
return;
Moving=true;
for(iIndex=0;iIndex<document.all.tags("td").length;iIndex++)
{
if(document.all.tags("td")[iIndex].className.indexOf('HeadTD')==0)
{
document.all.tags("td")[iIndex].className='HeadTD';
m_Object_.className='HeadTD_';
}
}
MoveMe(m_Object);
}
function MoveMe(m_Object)
{
IDNumber=parseInt(m_Object.id.substr(4));
m_ObjectTop=HeadHeight*(IDNumber-1);
m_ObjectButtom=BodyHeight+HeadHeight*(IDNumber-2);
CurrentTop=parseInt(m_Object.style.top);
if(CurrentTop>=m_ObjectButtom)
{
CountID=1;
for(iIndex=0;iIndex<document.all.tags("div").length;iIndex++)
if(document.all.tags("div")[iIndex].id=='Item'+CountID+'Body')
{
m_Object=document.all.tags("div")[iIndex];
m_ObjectTop=HeadHeight*(CountID-1);
if(CountID==IDNumber)
{
MoveUp(m_Object,m_ObjectTop,false);
break;
}
else
MoveUp(m_Object,m_ObjectTop,true);
CountID++;
}
}
else if((CurrentTop<=m_ObjectTop)&&(IDNumber<ObjectCount))
{
IDNumber++;
CountID=ObjectCount;
for(iIndex=document.all.tags("div").length-1;iIndex>=0;iIndex--)
if(document.all.tags("div")[iIndex].id=='Item'+CountID+'Body')
{
m_Object=document.all.tags("div")[iIndex];
m_ObjectButtom=BodyHeight+HeadHeight*(CountID-2);
if(CountID==IDNumber)
{
MoveDown(m_Object,m_ObjectButtom,false);
break;
}
else
MoveDown(m_Object,m_ObjectButtom,true);
CountID--;
}
}
}
function MoveUp(m_Object,m_ObjectTop,IsMove)
{
CurrentTop=parseInt(m_Object.style.top);
if(CurrentTop>m_ObjectTop)
{
m_Object.style.top=CurrentTop-Step;
setTimeout('MoveUp('+m_Object.id+','+m_ObjectTop+','+IsMove+')',1)
return;
}
Moving=IsMove;
}
function MoveDown(m_Object,m_ObjectButtom,IsMove)
{
CurrentTop=parseInt(m_Object.style.top);
if(CurrentTop<m_ObjectButtom)
{
m_Object.style.top=CurrentTop+Step;
setTimeout('MoveDown('+m_Object.id+','+m_ObjectButtom+','+IsMove+')',1)
return;
}
Moving=IsMove;
}
</script>
<style>
.HeadTD{background: #F2F2F2; border: 1px solid; border-color: #999999 #999999 #999999 #999999; cursor: hand; font-size: 9pt}
.HeadTD_{background: #FFFFFF; border: 1px solid; border-color: #999999 #999999 #999999 #999999; cursor: hand; font-size: 9pt}
.BodyTD{background: #FFFFFF; border: 0px solid; border-color: #999999 #999999 #999999 #999999; font-size: 9pt}
</style>
<fieldset style="position:absolute;top:10px;left:10px;height:312px;width:98px;">
<div>
<div id="Menu" style="position:absolute; left:2px; top:2px; width:90px; height:304px; z-index:3; overflow: hidden; background: #F2F2F2;" onclick="">
  <div id="Item1Body" style="position:absolute; left:0; top:0; width:90px; height:260px; z-index:1; overflow: hidden">
    <table width="90" border="0" height="100%" cellpadding="2" cellspacing="0">
      <tr>
        <td id="Item1Head" height="20" class="HeadTD_" onclick="ShowMe(Item1Body,this)">
          <div align="center">电子公告</div>
        </td>
    </tr>
    <tr>
        <td class="BodyTD"></td>
    </tr>
    </table>
  </div>
  <div id="Item2Body" style="position:absolute; left:0px; top:260; width:90; height:260; z-index:2; overflow: hidden">
    <table width="90" border="0" height="100%" cellpadding="2" cellspacing="0">
      <tr>
        <td id="Item2Head" height="20" class="HeadTD" onclick="ShowMe(Item2Body,this)">
          <div align="center">日常办公</div>
        </td>
      </tr>
     <tr>
        <td class="BodyTD">
          <div align="center"><a href="about:blank">公文拟制</a></div>
        </td>
      </tr>
      <tr>
        <td class="BodyTD">
          <div align="center"><a href="about:blank">工作简报</a></div>
        </td>
      </tr>       
    </table>
  </div>
  <div id="Item3Body" style="position:absolute; left:0; top:282; width:90px; height:260; z-index:3">
    <table width="100%" border="0" height="100%" cellpadding="2" cellspacing="0">
      <tr>
        <td id="Item3Head" height="20" class="HeadTD" onclick="ShowMe(Item3Body,this)">
          <div align="center">待办事宜</div>
        </td>
      </tr>
      <tr>
        <td class="BodyTD"></td>
      </tr>
    </table>
  </div>
</div>
</div>
</fieldset>