实用的对象化QQ菜单
研究了众多网上的对象化菜单及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 .代码可以随便传播。
- 最新文章
- 用javascript实现web进度条[01-10]
- 在客户端使用vpscript或javascript生成Wor..[01-10]
- 模拟windows control进度条[01-10]
- 网页中几种常用的表单输入判断[JS代码][01-10]
- 不利用activeX实现IE6无提示关闭窗口[01-10]
- 用Wipe等ActiveX技术实现n幅图片轮换擦洗显示[01-10]
- 相关文章
