介绍：鼠标经过导航链接时，层会向下弹性移动，显示相应的文字说明
以下代码加入<head>区域
<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("javascript","特效")
Menu[2]=new menuText("Study","网络学院")
Menu[3]=new menuText("plug","插件下载")
Menu[4]=new menuText("download","资源下载")
Menu[5]=new menuText("webmeng","网站联盟")
Menu[6]=new menuText("webbulid","网站建设")
function menuText(Title,content)
{
this.title=Title
this.content=content
}
function ChangeHeight(){
if (treediv.length)
{
for (i=0;i<treediv.length;i++){
diffH=CHeight[i]
pH=(speed)*(diffH-lastHeight[i]);
if(pH>0)pH=Math.ceil(pH);
else pH=Math.floor(pH);
treediv[i].style.pixelHeight+=pH;
lastHeight[i]=lastHeight[i]+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[i]=0
lastHeight[i]=0
treediv[i].innerHTML=Menu[i].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;
}
.content{
font-size:12px;
font-weight:400;
}
</style>
以下代码加入<body>区域
<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="#"><div class=divcss id="treediv" onmouseover="DivOver(0,this)" onmouseout="DivOut(0,this)"></div></a>
<a href="#"><div class=divcss id="treediv" onmouseover="DivOver(1,this)" onmouseout="DivOut(1,this)"></div></a>
<a href="#"><div class=divcss id="treediv" onmouseover="DivOver(2,this)" onmouseout="DivOut(2,this)"></div></a>
<a href="#"><div class=divcss id="treediv" onmouseover="DivOver(3,this)" onmouseout="DivOut(3,this)"></div></a>
<a href="#"><div class=divcss id="treediv" onmouseover="DivOver(4,this)" onmouseout="DivOut(4,this)"></div></a>
<a href="#"><div class=divcss id="treediv" onmouseover="DivOver(5,this)" onmouseout="DivOut(5,this)"></div></a>
<a href="#"><div class=divcss id="treediv" onmouseover="DivOver(6,this)" onmouseout="DivOut(6,this)"></div></a>
<div style="FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#007500,endColorStr=#009500);height:6px;overflow:hidden"></div>
</td>
<tr>
<td><div class=dh align=center><b>
<a href="http://www.smallrain.net" class=a1>小雨在线</a></b></div></td>
</tr>
</table>
</div>
