一个短小精悍使用的对象化QQ菜单[1]

[入库:2005年8月18日] [更新:2007年3月24日]

本文简介:选择自 zhjzh_zjz 的 blog

这是我根据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); //把第一个菜单作为默认显示

//************************************************************


本文关键:QQ菜单 outLook菜单
 

本站最佳浏览方式为 分辨率 1024x768 IE 6.0(或更高版本的 IE浏览器)

go top