分享
 
 
 

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

王朝html/css/js·作者佚名  2006-01-08
窄屏简体版  字體: |||超大  

这是我根据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 .代码可以随便传播。

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有