<script>
function CoolMenuControl(){

file://-----常 規變量---

this.lastScrollX=0;
this.lastScrollY=0;
this.lastScrollW=0;
this.lastScrollH=0;
this.FlsY=0;
this.td_X=0;
this.td_Y=0;
this.td_W=0;
this.td_H=0;
this.td=0;
this.My=14;
this.mouseon=0;
this.current=null
this.hk_name;
this.hktable_name;
this.menudiv_name;
this.menutable_name;
this.menuname;
this.ml=0;
this.menuarray=new Array();
this.speed;
this.href="";

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

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

file://-----程 序初試化---
this.init=function(name,bdc,bgc,speed,Alpha){
var inhtml=""
var cellcount=0
var lastcellcount=0
this.menuname=name
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++}

}

file://alert (cellcount)

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

suspendcode="<DIV id="+this.hk_name+" style='POSITION:absolute;z-index:3' 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()" style="right:12px;POSITION:absolute;TOP:12px;z-index:2">'
+'<table id='+this.menutable_name+' border="0" cellpadding="2" class="menu" cellspacing="4">'
+inhtml
+'</table></div>';
file://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)
}

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

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

file://-----滑 動處理---
this.scrollback=function(){
FY=document.body.scrollTop;
diffX=this.td_X-3
diffY=this.My
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);
percent=.1*(FY-this.FlsY);

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);
if(percent>0)percent=Math.ceil(percent);
else percent=Math.floor(percent);

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

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

file://-----滑 出---
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.My=this.td_Y-5-document.body.scrollTop
}
}

file://-----絕 對定位---
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
}

file://-----關 于---
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-weight:bold
}
</style>
<!--
第一步：實體化X-Menu類
用法:
var <實體變量>.new CoolMenuControl()
--->
<script language="javascript">
var CoolMenu3=new CoolMenuControl()

var about=new Array()
about[0]="關于X-Menu菜單\n\nAuthor:PuterJam\nCopyright 2004\n轉載請通知本人"
about[1]="關于作者\n\n\"這家伙很懶，什么也沒留下！！\"\n不過歡迎大家和我交流 Javascript\nQQ:10644570\nE-Mail:PuterJam@etang.com "

</script>
</head>
<body>
<!--
第二步：建立菜單項目---

用法:
<實體變量>.insertmenu(類型,Html代碼,鏈接網址,目標)
　類型：０代表菜單標題，１代表樹型菜單子項目，２代表橫向菜單子項目
　Html代碼：顯示在菜單上的Html代碼
鏈接網址：不用多說了，網址或Javascript腳本
目標：默認為空，既不在本頁打開；"_blank"代表在新的頁面打開
　例如:
CoolMenu2.insertmenu("2","<img src=http://www.blueidea.com/img/icon/arrow.gif> 新浪網","http://www.sina.com.cn/","_blank") 　
-->
<script>

CoolMenu3.insertmenu("0","<img src=http://bbs.dvbbs.net/Skins/Default/nofollow.gif> 樹形菜單","","")
CoolMenu3.insertmenu("0","<img src=http://www.blueidea.com/img/common/logo.gif> ","http://www.blueidea.com/","_blank")
CoolMenu3.insertmenu("1","關于X-Menu菜單","javascript:alert(about[0])","")
CoolMenu3.insertmenu("1","關于作者","javascript:alert(about[1])","")
CoolMenu3.insertmenu("1","聯系 我","mailto:PuterJam@etang.com","")
CoolMenu3.insertmenu("1","你的瀏覽器版本","javascript:alert(navigator.appName)","")
</script>

<!--
第三步：建立菜單---

用法:
<實體變量>.init(實體變量名,邊框顏色,背景顏色,滑動速度,背景半透明度)
'實體變量名'必須與<實體變量>相同
如果背景顏色="transparent"既為完全透明
　例如:
CoolMenu1.init("CoolMenu1","#002000","#38FFff",0.1,15) 　
-->
<script>CoolMenu3.init("CoolMenu3","#002000","#f0FF00",0.3,25)</script>
<script>
for (i=0;i<=100;i++)
{
document.write(i+"<br>")
}
</script>

</body>
點擊下載此文件

轉自 http://www.imting.com/puterjam/blogview.asp?logID=3&cateID=1

浮動的X-menu