js模仿flash菜单--转载

作者：puterjam
演示地址： http://www.pjhome.net/Html/FlashMenu.htm

< script > ...
var CHeight
var lastHeight
var lastDiv=null
var speed=.25
var Cid=null
var Menu=Array()
var ST=null
var MaxH=52
var MinH=28
Menu[0]=new menuText("Home","回到主页")
Menu[1]=new menuText("Download","下载")
Menu[2]=new menuText("Suport","技术支持")
Menu[3]=new menuText("Blog","http://puterjam.vipx.net")
Menu[4]=new menuText("BlueIdea","BlueIdea经典论坛")
Menu[5]=new menuText("Help","这是我第二个用JS写的仿Flash菜单")
Menu[6]=new menuText("Test","你死了我很小气的")

function menuText(Title,content)
...{
  this.title=Title
  this.content=content
}

function ChangeHeight()...{

if (treediv.length)
...{
  for (i=0;i<treediv.length;i++)...{
   diffH=CHeight
   pH=(speed)*(diffH-lastHeight);
   if(pH>0)pH=Math.ceil(pH);
    else pH=Math.floor(pH);
   treediv.style.pixelHeight+=pH;
   lastHeight=lastHeight+pH;
  }
}
else
...{
   diffH=CHeight
   pH=(speed)*(diffH-lastHeight);
   if(pH>0)pH=Math.ceil(pH);
    else pH=Math.floor(pH);
   treediv.style.pixelHeight+=pH;
   lastHeight=lastHeight+pH;
}

}

function DivOver(id,obj)...{
  divitem=event.srcElement
  if (treediv.length) ...{CHeight[id]=MaxH;Cid=id}else ...{CHeight=MaxH;Cid=0}
  divitem.style.backgroundColor="#007500";
  divitem.style.fontSize="14px";
  ST=window.setTimeout("show()",160)
}

function DivOut(id,obj)...{
divitem=event.srcElement
if (treediv.length) CHeight[id]=MinH;else CHeight=MinH;
divitem.style.backgroundColor="#00aa00"
divitem.style.fontSize="12px"
if (Cid!=null) 
   ...{
    if (treediv.length) treediv[Cid].innerHTML=Menu[Cid].title;else treediv.innerHTML=Menu[Cid].title;
    }
if (ST!=null) window.clearTimeout(ST)
if (treediv.length) 
  ...{if (treediv[Cid].filters[0]) ...{treediv[Cid].filters[0].stop();treediv[Cid].style.filter=""}}
   else
  ...{if (treediv.filters[0]) ...{treediv.filters[0].stop();treediv.style.filter=""}}
}

function show()...{
if (treediv.length) 
  ...{
  treediv[Cid].style.filter="blendtrans(duration=.1)"
  treediv[Cid].filters[0].apply();
  treediv[Cid].innerHTML=Menu[Cid].title+"<br>    "+Menu[Cid].content
  treediv[Cid].filters[0].play();
  }
  else
  ...{
  treediv.style.filter="blendtrans(duration=.1)"
  treediv.filters[0].apply();
  treediv.innerHTML=Menu[Cid].title+"<br>    "+Menu[Cid].content
  treediv.filters[0].play();  
  }
}

function init()
...{
if (treediv.length)
...{ 
  CHeight=new Array()
  lastHeight=new Array()
  for (i=0;i<treediv.length;i++)...{
   CHeight=0
   lastHeight=0
   treediv.innerHTML=Menu.title
  }
}
else
  ...{
  CHeight=0
  lastHeight=0
  treediv.innerHTML=Menu[0].title
  }
DivTD.style.pixelHeight=DivTD.scrollHeight+(MaxH-MinH)+4
setInterval("ChangeHeight()",1)
}



</ script >
< style > ...
.divcss{...}{
font-size:12px;
background-color:00aa00;
border-bottom:1px solid #ffffff;
padding:6px;
padding-left:15px;
color:#ffffff;
font-family:Arial;
cursor:hand;
line-height:130%;
  font-weight:bold;

}
.dh{...}{
font-size:12px;
border-bottom:1px solid #ffffff;
padding:12px;
color:#ffffff;
font-family:Arial;
cursor:default;
}
a{...}{
font-size:12px;
color:#FFFFFF;
text-decoration:none;
}
a:hover{...}{
font-size:12px;
color:#FFFFFF;
text-decoration:none;
}
a.a1:hover{...}{
font-size:12px;
color:#FFFFFF;
text-decoration:underline;
}
.content{...}{
font-size:12px;
font-weight:400;
}
</ style >
< body  onload =init()  bgcolor ="#cccccc" >
      < div  align ="center" >
      < table  border ="0"  width ="350"  cellpadding =0  cellspacing =0  style ="border:3px solid #ffffff;background-color:#009500;" >
           < tr >
            < td  valign ="top"  id =DivTD  background =#009500 >
               < a  href ="http://puterjam.vipx.net" >< div  class =divcss  id ="treediv"  onmouseover ="DivOver(0,this)"  onmouseout ="DivOut(0,this)" ></ div ></ a >
               < a  href ="javascript:alert(&#39;下载&#39;)" >< div  class =divcss  id ="treediv"  onmouseover ="DivOver(1,this)"  onmouseout ="DivOut(1,this)" ></ div ></ a >
               < a  href ="http://moodboy.com/puterjam/blog/blogview.asp?logID=66"  target =_blank >< div  class =divcss  id ="treediv"  onmouseover ="DivOver(2,this)"  onmouseout ="DivOut(2,this)" ></ div ></ a >
               < a  href ="http://puterjam.vipx.net"  target =_blank >< div  class =divcss  id ="treediv"  onmouseover ="DivOver(3,this)"  onmouseout ="DivOut(3,this)" ></ div ></ a >
               < a  href ="http://www.blueidea.com/bbs"  target =_blank >< div  class =divcss  id ="treediv"  onmouseover ="DivOver(4,this)"  onmouseout ="DivOut(4,this)" ></ div ></ a >
               < a  href ="javascript:alert(&#39;欢迎使用!&#39;)" >< div  _fcksavedurl ="" javascript:alert(&#39;欢迎使用!&#39;)" >< div " class =divcss  id ="treediv"  onmouseover ="DivOver(5,this)"  onmouseout ="DivOut(5,this)" ></ div ></ a >                         
               < a  href ="javascript:alert(&#39;转载请注明出处uterJam&#39;s Blog&#39;)" >< div  class =divcss  id ="treediv"  onmouseover ="DivOver(6,this)"  onmouseout ="DivOut(6,this)" ></ div ></ a >
               < div  style ="FILTER: progidXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#007500,endColorStr=#009500);height:6px;overflow:hidden" ></ div >
            </ td >
     < tr >
     < td >< div  class =dh  align =center >< b > JS Menu Made by 
           < a  href ="http://puterjam.vipx.net"  class =a1 > uterJam </ a ></ b ></ div ></ td >
     </ tr >           
      </ table >

      </ div >

</ body >