WEB开发网
开发学院网页设计JavaScript 实用的对象化QQ菜单 阅读

实用的对象化QQ菜单

 2007-12-09 11:01:37 来源:WEB开发网   
核心提示: 研究了众多网上的对象化菜单及QQ菜单的实现方法,小弟总结并编写了一个对象化QQ菜单,实用的对象化QQ菜单,短小精悍,实用性强,数值越大移动越慢var itemNo=0;function regsterMenu(menu){mMenu[mMenu.length]=menu;return mMenu.leng

   研究了众多网上的对象化菜单及QQ菜单的实现方法,小弟总结并编写了一个对象化QQ菜单,短小精悍,实用性强。现在拿出来晒晒,大家PP:

<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();
   //一定的时间间隔后继续移动,直到移了设定的步数stepN
  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); //把第一个菜单作为默认显示

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


//-->
</SCRIPT>


//本程序版权归 zhjzh_zjz .代码可以随便传播。

技术交流 永无止境

Tags:实用 对象化 QQ

编辑录入:coldstar [复制链接] [打 印]
赞助商链接