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

原创 2003年05月23日 11:41:00

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

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


//-->
</SCRIPT>


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

C语言对象化设计的实例——LCD菜单

这是我十三年前读研究生的时候写的系列文章《C语言嵌入式系统编程修炼》系列文章中的一小节,是一个用面向对象,把LCD上面菜单,对象化的例子。该文章原始出处: http://soft.yesky.com...
  • juS3Ve
  • juS3Ve
  • 2017年11月13日 00:00
  • 265

JavaScript 参考教程 之二:对象化编程

JavaScript 参考教程对象化编程  JavaScript 是使用“对象化编程”的,或者叫“面向对象编程”的。所谓“对象化编程”,意思是把 JavaScript 能涉及的范围划分成大大小小的对象...
  • forlinux
  • forlinux
  • 2006年06月02日 13:06
  • 1463

跨平台2D游戏引擎V-Play:3天开发一款原生游戏

摘要:V-Play是一款专门用于跨平台简易开发的游戏引擎,融合了原生C++引擎的高性能,及JS的灵活性和迭代速度。通过它,只需拥有简单的编程基础,便可在短短3天之内开发出一款运行于移动及桌面平台之上的...
  • hanliuxinming
  • hanliuxinming
  • 2014年03月04日 08:25
  • 638

安卓SlideMenu 仿QQ 主页侧滑菜单

先上图 仿qq 5.0Activity 代码package custom.community.com.mydemo;import android.os.Build; import android.o...
  • summer_ck
  • summer_ck
  • 2017年02月09日 11:16
  • 373

模仿QQ的一个很帅的菜单栏

模仿QQ的一个很帅的菜单栏 a{text-decoration:none;color:#000000;font-size:8pt;font-family:verdana}//-->   var top...
  • yihuei123
  • yihuei123
  • 2007年04月30日 10:26
  • 422

js—QQ菜单简单实例

用JS索引值(this.index)实现的qq菜单实例! ul,h2{padding: 0; margin: 0;} li{list-style: none;} ...
  • qq_28147861
  • qq_28147861
  • 2017年11月04日 16:26
  • 28

对象化JS之----仿outlook或者QQ的菜单

.folder1 {text-align:center; background: #00A4E1; border: 2px outset; background-image:url(Images/sk...
  • chenzengxi
  • chenzengxi
  • 2003年01月23日 09:46
  • 619

一个QQ菜单编辑器

原文地址:http://www.yesky.com/imagesnew/software/jscode/225.htmlCreateCode//生成代码function createCode(){  ...
  • xiaohutushen
  • xiaohutushen
  • 2006年08月23日 15:23
  • 881

仿QQ长按弹出功能菜单

android app普遍常用的弹出上下文菜单是列表式的。QQ列表,在上方弹出冒泡效果菜单,如图这里讲解一下如何写出这个效果:图片资源:两张图片,可以拼接成如上效果。首先,我们需要写布局文件: la...
  • meijian531161724
  • meijian531161724
  • 2015年07月08日 15:44
  • 3482

一个仿QQ导航菜单,非常实用!

仿QQ导航菜单.titleStyle{background-color:#008800;color:#ffffff;border-top:1px solid #FFFFFF;font-size:9pt...
  • JOHNCOOLS
  • JOHNCOOLS
  • 2006年03月16日 12:49
  • 1410
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:一个短小精悍使用的对象化QQ菜单
举报原因:
原因补充:

(最多只允许输入30个字)