JS特效代碼--一個很Cool的JS菜單效果

 <script>

function CoolMenuControl(){

//-----常規變量---
this.lastScrollX=0;
this.lastScrollY=0;
this.lastScrollW=0;
this.lastScrollH=0;
this.td_X=0;
this.td_Y=0;
this.td_W=0;
this.td_H=0;
this.td=0;
this.mouseon=0;
this.current=null
this.hk_name;
this.hktable_name;
this.menudiv_name;
this.menutable_name;
this.ml=0;
this.menuarray=new Array();
this.speed;
this.href="";

//-----菜單項目---
function menuitem(type,value,url,target){
this.type=type
this.value=value
this.url=url
this.target=target
}

//-----插入菜單---
this.insertmenu=function(type,value,url,target){
 this.menuarray[this.menuarray.length]=new menuitem(type,value,url,target)
}

//-----程序初試化---
this.init=function(name,bdc,bgc,speed,Alpha){ 
var inhtml=""
var cellcount=0
var lastcellcount=0
this.hk_name=name+"hk"
this.hktable_name=name+"hktable"
this.menudiv_name=name+"menudiv"
this.menutable_name=name+"menutable"
this.speed=speed

for (i=0;i<this.menuarray.length;i++)
 {
 if (this.menuarray[i].type=="2") cellcount=cellcount+1
 if (this.menuarray[i].type=="1" || this.menuarray[i].type=="0") {cellcount=0}
 if (lastcellcount<cellcount) {lastcellcount++}
 
 }

//alert(cellcount)

stylecode="cursor:hand;filter:Alpha(style=0,opacity="+Alpha+");background-color:"+bgc

suspendcode="<DIV id="+this.hk_name+" style='POSITION:absolute;' onclick='"+name+".doClick()'>"
 +"<table id="+this.hktable_name+" border='1' width='0' cellspacing='0' style='border-collapse: collapse' bordercolor='"+bdc+"'>"
 +"<tr><td height='18' style='"+stylecode+"'></td></tr></table></div>";
document.write(suspendcode);
var fcell=true
for (i=0;i<this.menuarray.length;i++)
{
 switch(this.menuarray[i].type)
 {
 case "0":
 t=cellcount*2
 if (t<=0) 
 {
 inhtml+='<tr><td colspan=2 class=ht onmouseover=''+name+'.href="'+this.menuarray[i].url+','+this.menuarray[i].target+'"'>'+this.menuarray[i].value
 }
 else
 {
 inhtml+='<tr><td colspan='+t+' class=ht onmouseover=''+name+'.href="'+this.menuarray[i].url+','+this.menuarray[i].target+'"'>'+this.menuarray[i].value
 }
 fcell=true
 break;
 case "1":
 t=(cellcount-1)*2
 if (t<=0) 
 {
 inhtml+='<tr><td width=6><td onmouseover=''+name+'.href="'+this.menuarray[i].url+','+this.menuarray[i].target+'"'>'+this.menuarray[i].value
 }
 else
 {
 inhtml+='<tr><td width=6><td colspan='+t+' onmouseover=''+name+'.href="'+this.menuarray[i].url+','+this.menuarray[i].target+'"'>'+this.menuarray[i].value
 }
 fcell=true
 break;
 
 case "2":
 if (fcell)
 {
 inhtml+='<tr><td width=6><td onmouseover=''+name+'.href="'+this.menuarray[i].url+','+this.menuarray[i].target+'"'>'+this.menuarray[i].value;
 fcell=false
 }
 else
 {
 inhtml+='<td width=6><td onmouseover=''+name+'.href="'+this.menuarray[i].url+','+this.menuarray[i].target+'"'>'+this.menuarray[i].value;
 }
 break;
 }
}
inhtml='<div id='+this.menudiv_name+' onmousemove="'+name+'.doOver()">'
 +'<table id='+this.menutable_name+' border="0" cellpadding="2" class="menu" cellspacing="4">'
 +inhtml
 +'</table></div>';
//alert(inhtml)
document.write(inhtml);

this.lastScrollX=0;
this.lastScrollY=-4;
this.posXY(eval(this.menutable_name).cells[0])
this.td_W=eval(this.menutable_name).cells[0].scrollWidth+6 
this.td_H=eval(this.menutable_name).cells[0].scrollHeight
setInterval(name+".scrollback()",1)
}

//-----單擊超連接---
this.doClick=function(){
 //alert(this.url)
 var url=this.href.split(",")
 //alert(url[0])
 //alert(url[1])
if (url[0]=="") return

if (url[1]=="_blank")
 {window.open(url[0])}
 else
 {location.href=url[0]}
}

//-----滑動處理---
this.scrollback=function(){
diffX=this.td_X-3
diffY=this.td_Y-5
diffW=this.td_W
diffH=this.td_H
percentX=this.speed*(diffX-this.lastScrollX);
percentY=this.speed*(diffY-this.lastScrollY);
percentW=this.speed*(diffW-this.lastScrollW);
percentH=this.speed*(diffH-this.lastScrollH);

if(percentX>0)percentX=Math.ceil(percentX);
else percentX=Math.floor(percentX);
if(percentY>0)percentY=Math.ceil(percentY);
else percentY=Math.floor(percentY);
if(percentW>0)percentW=Math.ceil(percentW);
else percentW=Math.floor(percentW);
if(percentH>0)percentH=Math.ceil(percentH);
else percentH=Math.floor(percentH);

eval(this.hk_name).style.pixelTop+=percentY;
eval(this.hk_name).style.pixelLeft+=percentX;
eval(this.hktable_name).style.pixelWidth+=percentW;
eval(this.hktable_name).style.pixelHeight+=percentH;

this.lastScrollX=this.lastScrollX+percentX;
this.lastScrollY=this.lastScrollY+percentY;
this.lastScrollW=this.lastScrollW+percentW;
this.lastScrollH=this.lastScrollH+percentH;
}

//-----滑出---
this.doOver=function() {
 if (event.srcElement.tagName=="TD") {
 if (event.srcElement.innerText.length==0 || event.srcElement.innerText=="|") return
 this.posXY(event.srcElement)
 this.td_W=event.srcElement.scrollWidth+6 
 this.td_H=event.srcElement.scrollHeight
 }
}

//-----絕對定位---
this.posXY=function(obj){
 hk_left=obj.offsetLeft
 hk_top=obj.offsetTop
 vParent = obj.offsetParent;
 
 while (vParent.tagName.toUpperCase() != "BODY")
 {
 hk_left += vParent.offsetLeft;
 hk_top += vParent.offsetTop;
 vParent = vParent.offsetParent;
 }
 
 this.td_X=hk_left
 this.td_Y=hk_top
}

//-----關於---
this.about=function(){
alert("OK")
}

}
</script>

<head>
<meta http-equiv="Content-Language" content="zh-cn">
<style>
.b{color=#000066;cursor:hand}
.menu {
font-family:Arial;
cursor:Default;
font-size:12px;
border:1px #000000 solid;
border-collapse: collapse;
filter:progid:DXImageTransform.Microsoft.Gradient(gradienttype=0, startcolorstr=#ffffff, endcolorstr=#dddddd)
 progid:DXImageTransform.Microsoft.Shadow(direction=135,color=#cccccc,strength=3);
}
.ht{
font-w