这是我根据1000script上的qq菜单自己该的一个对象化菜单,短小精悍,实用性强,我们所做的软件就用的这个。现在贡献出来,和大家共享:
<style type="text/css">
.titlestyle{
background-color:#6699cc;color:#ffffff;
border-top:1px solid #ffffff;font-size:9pt;cursor:hand;
}
.contentstyle{
background-color:#efefef;color:blue;font-size:9pt;
}
</style>
</head>
<body>
<script language=javascript>
<!--
var mmenu=new array()
var headheight = 22;//每个标题的高度
var bodyheight = 260;//母体高度
var objcount = 6;//项目的个数,要改变了项目的个数别忘了该这个东西
var step = 6;//移动速度(请确认可以被'bodyheight-headheight'整除,当前的设定可选速度为1,2,3,6,23,138)
var moving = false;//是否有移动的项目
var layertop=50; //菜单顶边距
var layerleft=50; //菜单左边距
var layerwidth=140; //菜单总宽度
var titleheight=20; //标题栏高度
var contentheight=200; //内容区高度
var stepno=1; //移动步数,数值越大移动越慢
var itemno=0;
function regstermenu(menu){
mmenu[mmenu.length]=menu;
return mmenu.length-1;
}
function mainmenu(img,capture,hrefurl){
this.items=new array();
this.img=img;
this.capture=capture;
this.hrefurl=hrefurl;
this.id=regstermenu(this);
}
//img 是作为图标的图像位置
//capture 是连接的文字
//href是超连接的地址
function submenu(img,capture,hrefurl){
this.img=img;
this.capture=capture;
this.hrefurl=hrefurl;
}
function addsub(item){
this.items[this.items.length]=item;
}
mainmenu.prototype.addsub=addsub;
function generatehtml(mmenu){
var menuhtml="";
menuhtml+="<span id=itemslayer style=\"position:absolute;overflow:hidden;border:1px solid #008800;left:'"+layerleft+"';top:'"+layertop+"';width:'"+layerwidth+"';\">"
for(var i=0;i<mmenu.length;i++){
menuhtml+="<div id=item"+i+" style=\"left: 0px; width: "+layerwidth+"; position: relative; top:-"+contentheight*i+"px\" itemindex=\""+i+"\"><table cellspacing=0 cellpadding=0 width=\"100%\"><tbody><tr><td class=titlestyle onclick=changeitem("+i+") align=middle height="+titleheight+">"+mmenu[i].capture+"</td></tr>"
if(mmenu[i].items.length!=0){
menuhtml+="<tr><td class=contentstyle height=200><div style=\"overflow:auto;height:200;\">"
for(var q=0;q<mmenu[i].items.length;q++){
menuhtml+="<br><center>"+mmenu[i].items[q].capture+"</center>"
}
menuhtml+="</div></td></tr>"
}
menuhtml+="</tbody></table></div>"
}
menuhtml+="</span>"
return menuhtml;
}
var mm1=new mainmenu('#','我的收藏夹','#');
mm1.addsub(new submenu('#','娱乐世界','#'));
mm1.addsub(new submenu('#','娱乐世界','#'));
mm2=new mainmenu('#','我的收藏夹','#');
mm2.addsub(new submenu('#','娱乐世界','#'));
mm3=new mainmenu('#','我的收藏夹','#');
mm3.addsub(new submenu('#','娱乐世界','#'));
mm4=new mainmenu('#','我的收藏夹','#');
mm4.addsub(new submenu('#','娱乐世界','#'));
mm4.addsub(new submenu('#','娱乐世界','#'));
document.write (generatehtml(mmenu));
document.all.itemslayer.style.height =mmenu.length*titleheight+contentheight;
//************************************************************
var toitemindex=mmenu.length-1;
var onitemindex=mmenu.length-1;
var runtimes=0; //"runtimes"用于记录层移动次数
//菜单标题被点击时调用这个函数:
function changeitem(clickitemindex){
//myid.innertext=" "+itemslayer.outerhtml+" "
//判断相应的层应上移还是下移:
toitemindex=clickitemindex;
if(toitemindex-onitemindex>0) moveup();
else movedown();
//一定的时间间隔后继续移动,直到移了设定的步数stepno:
runtimes++;
if(runtimes>=stepno){
onitemindex=toitemindex;
runtimes=0;}
else
settimeout("changeitem(toitemindex)",10);
}
//相应菜单上移:
function moveup(){
//判断应一起上移的菜单,并让它(们)每次移动contentheight/stepno的距离:
for(i=onitemindex+1;i<=toitemindex;i++)
eval('document.all.item'+i+'.style.top=parseint(document.all.item'+i+'.style.top)-contentheight/stepno;');
}
//相应菜单下移:
function movedown(){
for(i=onitemindex;i>toitemindex;i--)
eval('document.all.item'+i+'.style.top=parseint(document.all.item'+i+'.style.top)+contentheight/stepno;');
}
//changeitem(0); //把第一个菜单作为默认显示
//************************************************************