发一个仿QQ菜单的JS

来源：互联网发布：简单重复的工作知乎编辑：程序博客网时间：2024/05/16 20:27

代码:

var bar_open = false;
var active_bar = null;
var timer = null;
var hasShow = true;

function Item_MouseDown(obj)
{
    obj.style.borderWidth=1;
    obj.style.borderTopColor="#666666";
    obj.style.borderBottomColor="#FFFFFF";
    obj.style.borderLeftColor="#666666";
    obj.style.borderRightColor="#FFFFFF";
}

function Item_MouseUp(obj)
{
Item_MouseOver(obj);
}

function Item_MouseOver(obj)
{
    if (obj==null) return;
    obj.style.borderWidth=1;
    obj.style.borderTopColor="#FFFFFF";
    obj.style.borderBottomColor="#666666";
    obj.style.borderLeftColor="#FFFFFF";
    obj.style.borderRightColor="#666666";
}

function Item_MouseOut(obj)
{
if (obj==null) return;
obj.style.borderWidth=0;
}

function setScrollBtn() {if (active_bar) ScrollButton_MoveTo(active_bar.nextSibling);}

function scrollStart(step)
{
    if (active_bar==null) return;
    var obj = active_bar.nextSibling.children[0].children[0];
    if (obj==null) return;
    obj.scrollTop+=step;
    if (obj.scrollTop>0 && obj.scrollTop+obj.offsetHeight<obj.children[0].offsetHeight)
        timer = setTimeout("scrollStart("+step+")", 100);
    else
        setScrollBtn();
}

function scrollStop()
{
clearTimeout(timer);
}

function addBar(caption,background)
{
if (bar_open) barEnd();
    bar_open = true;
    var _background="images/css/default/left.gif";
    if(IsSpace(background)==false){
    _background = "images/css/default/left.gif";
    }
    document.write("<tr onclick=/"Bar_Click(this)/" height=19 extend=/"MenuBar/" style=/"cursor: hand/">/n"
                 + " <td valign=middle align=center><table width=/"115/" height=/"26/" border=/"0/" cellpadding=/"0/" cellspacing=/"0/" background=/""+_background+"/">/n"
                 + "<tr><td align=/"center/" class=/"leftfont/">"+caption+"</td></tr></table></td>"
                 + "</tr><tr style=/"display:none/"><td valign=top align=center>/n"
                 + " <div style='height:100%;width:88%;overflow:hidden;' onresize='setScrollBtn();';>"
                 + "<table width=88% border=0 align=center valign=top>");
}

function barEnd()
{
document.write("</table></div></td></tr>/n");
bar_open = false;
}

function addItem(caption, href,target,bgImage)
{
    var _target="_self";
    if (caption==null || href==null) return;
    if(target!=null) _target=target;
    var _bgImage = "";
    if(IsSpace(bgImage)==false) _bgImage = " background=/"/image/menu/"+bgImage+"/" ";
    document.write("<tr height=20><td align=center valign=middle onmousedown=/"Item_MouseDown(this)/" onmouseup=/"Item_MouseUp(this)/" onmouseenter=/"Item_MouseOver(this)/" onmouseout=/"Item_MouseOut(this)/" onclick=/"Item_Click(this)/" target=/""+_target+"/" href=/""+href+"/" style=/"border:0 solid; BORDER-LEFT-COLOR: #FFFFF; BORDER-BOTTOM-COLOR: #666666; BORDER-TOP-COLOR: #FFFFF; BORDER-RIGHT-COLOR: #666666;cursor: hand/" "+_bgImage+">"+caption+"</td></tr>/n");
}

function showBar(barid)
{
    var bar = document.getElementById("first_bar");
    if (bar==null) return;
for(var bi=1;bi<barid;bi++)
{
    bar = bar.nextSibling;
bar = bar.nextSibling;
}
while (bar && bar.extend!="MenuBar") bar = bar.nextSibling;
    if (bar.extend=="MenuBar") Bar_Click(bar);
}

function showOutlookBar()
{

    document.write("<table width=100% height=100% border=0 cellspacing=0 cellpadding=0 align=center valign=top id=tab1>/n"
                 + "<tr height=0 style=/"display:none/" id=/"first_bar/"><td></td></tr>/n");
showItems();
if (bar_open) barEnd();
    document.write("<tr style=/"display:none/" id=/"last_bar/"><td colspan=3 valign=top>/n"
       + "<div style='height:100%;width:100%;overflow:hidden;'>/n"
       + "<table width=100% border=0 align=center valign=top><tr>/n"
       + "<td></td></tr></table></div></tr>");
    document.write("</table>/n"
                 + "<input id=/"scroll_btn_up/" type=image src=/"images/css/default/up.gif/" style='z-index:3;position:absolute;width:19px;height:19px;left:0;top:0;display:none;' onmousedown='scrollStart(-20);' onmouseup='scrollStop();' onclick='return false;'>/n"
                 + "<input id=/"scroll_btn_dn/" type=image src=/"images/css/default/down.gif/" style='z-index:3;position:absolute;width:19px;height:19px;left:0;top:0;display:none;' onmousedown='scrollStart(20);' onmouseup='scrollStop();' onclick='return false;'>/n");
showBar(1);
}

把上面的另存为qqmenu.js

使用方法,

1.引入qqmenu.js

2.动态增加菜单并显示代码:

<SCRIPT language="Javascript">
function showItems(){
addBar('菜单一');
addItem('子菜单','要打开的页面',打开位置')
addItem('子菜单','要打开的页面',打开位置')
addItem('子菜单','要打开的页面',打开位置')
addItem('子菜单','要打开的页面',打开位置')
addBar('菜单二');
addItem('子菜单','要打开的页面',打开位置')
addItem('子菜单','要打开的页面',打开位置')
addItem('子菜单','要打开的页面',打开位置')
addItem('子菜单','要打开的页面',打开位置')
}
showOutlookBar();
</SCRIPT>