XP风格的右键菜单

最新推荐文章于 2025-09-12 16:56:45 发布
转载最新推荐文章于 2025-09-12 16:56:45 发布 · 101 阅读
0 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/youtianxia/p/4091343.html
文章标签：
#javascript #ViewUI
<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>网页特效--XP风格的右键菜单丨石家庄瑜伽馆-河北草坪</title>
    <STYLE>.menutable {
    BACKGROUND-COLOR: #ffffff; BORDER-BOTTOM: #307ce8 1px solid; BORDER-LEFT: #307ce8 5px solid; BORDER-RIGHT: #307ce8 1px solid; BORDER-TOP: #94bcf3 1px solid; FONT-SIZE: 12px; POSITION: absolute; Z-INDEX: 100
    }
    .menutrin {
    BACKGROUND-COLOR: #1a71e6; COLOR: #ffffff; CURSOR: hand
    }
    .menutrout {
    COLOR: #000000; CURSOR: hand
    }
    .menutd0 {
    HEIGHT: 25px; TEXT-ALIGN: center; WIDTH: 28px; 改变这个修改菜单高度--->:
    }
    .menutd1 {
    FONT-FAMILY: Webdings; TEXT-ALIGN: right; WIDTH: 46px
    }
    .linktd1 {
    WIDTH: 46px
    }
    .menutd2 {
    WIDTH: 4px
    }
    .menuhr {
    BORDER-BOTTOM: #307ce8 1px inset; BORDER-LEFT: #307ce8 1px inset; BORDER-RIGHT: #307ce8 1px inset; BORDER-TOP: #307ce8 1px inset
    }
    </STYLE>
    <BGSOUND id=theBS loop=0 src=""></HEAD>
    <BODY bgColor=#eaf5fd style="FONT-SIZE: 10pt">
    <SCRIPT><!----
    /*-----------------------------------------------------------
    鼠标右键菜单 1.0 Designed By Stroll  e-mail: csy-163@163.com
    --------------------------------------------------------------*/
    //---------------  有关数据 -----------------//
    var IconList = new Array();   // icon图片 集合， 下标从 1 开始
    IconList[1] = new Image();
    IconList[1].src = "/imagesforcode/201212/gif1.gif";
    IconList[2] = new Image();
    IconList[2].src = "/imagesforcode/201212/gif2.gif";
    IconList[3] = new Image();
    IconList[3].src = "/imagesforcode/201212/gif3.gif";
    IconList[4] = new Image();
    IconList[4].src = "/imagesforcode/201212/gif4.gif";
    //----------------  检测变量 菜单的显示隐藏就靠它了！！！  ------------------//
    var JustMenuID = "";
    var SubMenuList = new Array();
    var NowSubMenu = "";
    var mouseCanSound = true;          //---------------------------  声音开关 ------  声音开关 ------------------//
    var menuSpeed     =  50;   //---------- 菜单显示速度 ------------//
    var alphaStep     =  30;   //---------- Alpaha 变化 度 -----------//
    //------------- 构建 主菜单 对象 -------------//
    function MouseMenu(objName)
    {
    this.id           = "Menu_"+objName;
    this.obj          = objName;
    this.length  = 0;
    this.addMenu = addMenu;
    this.addLink = addLink;
    this.addHR   = addHR;
    JustMenuID = this.id;
    document.body.insertAdjacentHTML('beforeEnd','<table id="'+this.id+'" border="0" cellspacing="0" cellpadding="0" style="top: 0; left: 0; visibility: hidden; filter:Alpha(Opacity=0);" class="menutable" onmousedown=event.cancelBubble=true; onmouseup=event.cancelBubble=true></table>');
    }
    //----------- 构建 子菜单 对象 -------------//
    function SubMenu(objName,objID)
    {
    this.obj = objName;
    this.id  = objID;
    this.addMenu = addMenu;
    this.addLink = addLink;
    this.addHR   = addHR;
    this.length  = 0;
    }
    //-------------- 生成 菜单 makeMenu 方法 -----------//
    function makeMenu(subID,oldID,word,icon,url,target,thetitle)
    {
    var thelink = '';
    if(icon&&icon!="")
    {
    icon = '<img border="0" src="'+IconList[icon].src+'">';
    }
    else
    {
    icon = '';
    }
    if(!thetitle||thetitle=="")
    {
    thetitle = '';
    }
    if(url&&url!="")
    {
    thelink += '<a href="'+url+'" ';
    if(target&&target!="")
    {
    thelink += '  ';
    thelink += 'target="'+target+'" '
    }
    thelink += '></a>';
    }
    var Oobj = document.getElementById(oldID);
    /*--------------------------------------------- 菜单html样式
    <tr class="menutrout" id="trMenu_one_0" title="I am title">
    <td class="menutd0"><img src="icon/sub.gif" border="0" width="16" height="16"></td>
    <td><a href="javascript:alert('I am menu');" target="_self"></a><nobr>菜单一</nobr></td>
    <td class="menutd1">4</td>
    <td class="menutd2">&nbsp;</td>
    </tr>
    --------------------------------------------------*/
    Oobj.insertRow();
    with(Oobj.rows(Oobj.rows.length-1))
    {
    id    = "tr"+subID;
    className = "menutrout";
    title       = thetitle;
    }
    eventObj = "tr"+subID;
    eval(eventObj+'.attachEvent("onmouseover",MtrOver('+eventObj+'))');
    eval(eventObj+'.attachEvent("onclick",MtrClick('+eventObj+'))');
    var trObj = eval(eventObj);
    for(i=0;i<4;i++)
    {
    trObj.insertCell();
    }
    with(Oobj.rows(Oobj.rows.length-1))
    {
    cells(0).className = "menutd0";
    cells(0).innerHTML = icon;
    cells(1).innerHTML = thelink+'<nobr class=indentWord>'+word+'</nobr>';
    cells(1).calssName = "indentWord"
    cells(2).className = "menutd1";
    cells(2).innerHTML = "4";
    cells(3).className = "menutd2";
    cells(3).innerText = " ";
    }
    document.body.insertAdjacentHTML('beforeEnd','<table id="'+subID+'" border="0" cellspacing="0" cellpadding="0" style="top: 0; left: 0; visibility: hidden; filter:Alpha(Opacity=0);" class="menutable" onmousedown=event.cancelBubble=true; onmouseup=event.cancelBubble=true></table>');
    }
    //---------------- 生成连接 makeLink 方法 ------------//
    function makeLink(subID,oldID,word,icon,url,target,thetitle)
    {
    var thelink = '';
    if(icon&&icon!="")
    {
    icon = '<img border="0" src="'+IconList[icon].src+'">';
    }
    else
    {
    icon = '';
    }
    if(!thetitle||thetitle=="")
    {
    thetitle = '';
    }
    if(url&&url!="")
    {
    thelink += '<a href="'+url+'" ';
    if(target&&target!="")
    {
    thelink += '  ';
    thelink += 'target="'+target+'" '
    }
    thelink += '></a>';
    }
    var Oobj = document.getElementById(oldID);
    /*--------------------------------------------- 连接html样式
    <tr class="menutrout" id="trMenu_one_0" title="I am title">
    <td class="menutd0"><img src="icon/sub.gif" border="0" width="16" height="16"></td>
    <td><a href="javascript:alert('I am link');" target="_self"></a><nobr>连接一</nobr></td>
    <td class="linktd1"></td>
    <td class="menutd2">&nbsp;</td>
    </tr>
    --------------------------------------------------*/
    Oobj.insertRow();
    with(Oobj.rows(Oobj.rows.length-1))
    {
    id    = "tr"+subID;
    className = "menutrout";
    title       = thetitle;
    }
    eventObj = "tr"+subID;
    eval(eventObj+'.attachEvent("onmouseover",LtrOver('+eventObj+'))');
    eval(eventObj+'.attachEvent("onmouseout",LtrOut('+eventObj+'))');
    eval(eventObj+'.attachEvent("onclick",MtrClick('+eventObj+'))');
    var trObj = eval(eventObj);
    for(i=0;i<4;i++)
    {
    trObj.insertCell();
    }
    with(Oobj.rows(Oobj.rows.length-1))
    {
    cells(0).className = "menutd0";
    cells(0).innerHTML = icon;
    cells(1).innerHTML = thelink+'<nobr class=indentWord>'+word+'</nobr>';
    cells(2).className = "linktd1";
    cells(2).innerText = " ";
    cells(3).className = "menutd2";
    cells(3).innerText = " ";
    }
    }
    //-------------- 菜单对象 addMenu 方法 ------------//
    function addMenu(word,icon,url,target,title)
    {
    var subID    = this.id + "_" + this.length;
    var subObj  = this.obj+"["+this.length+"]";
    var oldID   = this.id;
    eval(subObj+"= new SubMenu('"+subObj+"','"+subID+"')");
    makeMenu(subID,oldID,word,icon,url,target,title);
    this.length++;
    }
    //------------- 菜单对象 addLink 方法 -------------//
    function addLink(word,icon,url,target,title)
    {
    var subID    = this.id + "_" + this.length;
    var oldID  = this.id;
    makeLink(subID,oldID,word,icon,url,target,title);
    this.length++;
    }
    //------------ 菜单对象 addHR 方法 -----------------//
    function addHR()
    {
    var oldID = this.id;
    var Oobj = document.getElementById(oldID);
    Oobj.insertRow();
    /*------------------------------------------
    <tr>
    <td colspan="4">
    <hr class="menuhr" size="1" width="95%">
    </td>
    </tr>
    --------------------------------------------*/
    Oobj.rows(Oobj.rows.length-1).insertCell();
    with(Oobj.rows(Oobj.rows.length-1))
    {
    cells(0).colSpan= 4;
    cells(0).insertAdjacentHTML('beforeEnd','<hr class="menuhr" size="1" width="95%">');
    }
    }
    //--------- MtrOver(obj)-------------------//
    function MtrOver(obj)
    {
    return sub_over;
    function sub_over()
    {
    var sonid = obj.id.substring(2,obj.id.length);
    var topobj = obj.parentElement.parentElement;
    NowSubMenu = topobj.id;
    if(obj.className=="menutrout")
    {
    mouseWave();
    }
    HideMenu(1);
    SubMenuList[returnIndex(NowSubMenu)] = NowSubMenu;
    ShowTheMenu(sonid,MPreturn(sonid))
    SubMenuList[returnIndex(obj.id)] = sonid;
    if(topobj.oldTR)
    {
    eval(topobj.oldTR+'.className = "menutrout"');
    }
    obj.className = "menutrin";
    topobj.oldTR = obj.id;
    }
    }
    //--------- LtrOver(obj)-------------------//
    function LtrOver(obj)
    {
    return sub_over;
    function sub_over()
    {
    var topobj = obj.parentElement.parentElement;
    NowSubMenu = topobj.id;
    HideMenu(1);
    SubMenuList[returnIndex(NowSubMenu)] = NowSubMenu;
    if(topobj.oldTR)
    {
    eval(topobj.oldTR+'.className = "menutrout"');
    }
    obj.className = "menutrin";
    topobj.oldTR = obj.id;
    }
    }
    //--------- LtrOut(obj)-------------------//
    function LtrOut(obj)
    {
    return sub_out;
    function sub_out()
    {
    var topobj = obj.parentElement.parentElement;
    obj.className = "menutrout";
    topobj.oldTR = false;
    }
    }
    //----------MtrClick(obj)-----------------//
    function MtrClick(obj)
    {
    return sub_click;
    function sub_click()
    {
    if(obj.cells(1).all.tags("A").length>0)
    {
    obj.cells(1).all.tags("A")(0).click();
    }
    }
    }
    //---------- returnIndex(str)--------------//
    function returnIndex(str)
    {
    return (str.split("_").length-3)
    }
    //---------ShowTheMenu(obj,num)-----------------//
    function ShowTheMenu(obj,num)
    {
    var topobj = eval(obj.substring(0,obj.length-2));
    var trobj  = eval("tr"+obj);
    var obj = eval(obj);
    if(num==0)
    {
    with(obj.style)
    {
    pixelLeft = topobj.style.pixelLeft +topobj.offsetWidth;
    pixelTop  = topobj.style.pixelTop + trobj.offsetTop;
    }
    }
    if(num==1)
    {
    with(obj.style)
    {
    pixelLeft = topobj.style.pixelLeft + topobj.offsetWidth;
    pixelTop  = topobj.style.pixelTop  + trobj.offsetTop + trobj.offsetHeight - obj.offsetHeight;
    }
    }
    if(num==2)
    {
    with(obj.style)
    {
    pixelLeft = topobj.style.pixelLeft -  obj.offsetWidth;
    pixelTop  = topobj.style.pixelTop + trobj.offsetTop;
    }
    }
    if(num==3)
    {
    with(obj.style)
    {
    pixelLeft = topobj.style.pixelLeft -  obj.offsetWidth;
    pixelTop  = topobj.style.pixelTop  + trobj.offsetTop + trobj.offsetHeight - obj.offsetHeight;
    }
    }
    obj.style.visibility  = "visible";
    if(obj.alphaing)
    {
    clearInterval(obj.alphaing);
    }
    obj.alphaing = setInterval("menu_alpha_up("+obj.id+","+alphaStep+")",menuSpeed);
    }
    //----------HideMenu(num)-------------------//
    /*----------------------
    var SubMenuList = new Array();
    var NowSubMenu = "";
    ---------------------*/
    function HideMenu(num)
    {
    var thenowMenu = "";
    var obj = null;
    if(num==1)
    {
    thenowMenu = NowSubMenu
    }
    for(i=SubMenuList.length-1;i>=0;i--)
    {
    if(SubMenuList[i]&&SubMenuList[i]!=thenowMenu)
    {
    obj = eval(SubMenuList[i]);
    if(obj.alphaing)
    {
    clearInterval(obj.alphaing);
    }
    obj.alphaing = setInterval("menu_alpha_down("+obj.id+","+alphaStep+")",menuSpeed);
    obj.style.visibility = "hidden";
    eval("tr"+SubMenuList[i]).className = "menutrout";
    SubMenuList[i] = null;
    }
    else
    {
    if(SubMenuList[i]==thenowMenu)
    {
    return;
    }
    }
    }
    NowSubMenu = "";
    }
    //-----------MainMenuPosition return()------------//
    function MMPreturn()
    {
    var obj = eval(JustMenuID);
    var x = event.clientX;
    var y = event.clientY;
    var judgerX = x + obj.offsetWidth;
    var judgerY = y + obj.offsetHeight;
    var px = 0;
    var py = 0;
    if(judgerX>document.body.clientWidth)
    {
    px = 2;
    }
    if(judgerY>document.body.clientHeight)
    {
    py = 1;
    }
    return (px+py);
    }
    //-----------MenuPosition return(obj)--------------//
    function MPreturn(obj)
    {
    var topobj = eval(obj.substring(0,obj.length-2));
    var trobj  = eval("tr"+obj);
    var x = topobj.style.pixelLeft + topobj.offsetWidth;
    var y = topobj.style.pixelTop  + trobj.offsetTop;
    obj = eval(obj);
    var judgerY =  obj.offsetHeight + y;
    var judgerX =  obj.offsetWidth  + x;
    var py = 0;
    var px = 0;
    if(judgerY>=document.body.clientHeight)
    {
    py = 1;
    }
    if(judgerX>= document.body.clientWidth)
    {
    px = 2;
    }
    return (px+py);
    }
    //-----------mouseWave()-------------//
    function mouseWave()
    {
    if(mouseCanSound)
    {
    theBS.src= "sound/sound.wav";
    }
    }
    //----------- menu_alpha_down -------//
    function menu_alpha_down(obj,num)
    {
    var obj = eval(obj);
    if(obj.filters.Alpha.Opacity > 0 )
    {
    obj.filters.Alpha.Opacity += -num;
    }
    else
    {
    clearInterval(obj.alphaing);
    obj.filters.Alpha.Opacity = 0;
    obj.alphaing = false;
    obj.style.visibility = "hidden";
    }
    }
    //------------ menu_alpha_up --------//
    function menu_alpha_up(obj,num)
    {
    var obj = eval(obj);
    if(obj.filters.Alpha.Opacity<100)
    obj.filters.Alpha.Opacity += num;
    else
    {
    clearInterval(obj.alphaing);
    obj.filters.Alpha.Opacity = 100;
    obj.alphaing = false;
    }
    }
    //----------- IE ContextMenu -----------------//
    function document.oncontextmenu()
    {
    return false;
    }
    //----------- IE Mouseup ----------------//
    function document.onmouseup()
    {
    if(event.button==2)
    {
    HideMenu(0);
    var obj = eval(JustMenuID)
    obj.style.visibility = "hidden";
    if(obj.alphaing)
    {
    clearInterval(obj.alphaing);
    }
    obj.filters.Alpha.Opacity = 0;
    var judger = MMPreturn()
    if(judger==0)
    {
    with(obj.style)
    {
    pixelLeft = event.clientX + document.body.scrollLeft;
    pixelTop  = event.clientY + document.body.scrollTop;
    }
    }
    if(judger==1)
    {
    with(obj.style)
    {
    pixelLeft = event.clientX + document.body.scrollLeft;
    pixelTop  = event.clientY - obj.offsetHeight + document.body.scrollTop;
    }
    }
    if(judger==2)
    {
    with(obj.style)
    {
    pixelLeft = event.clientX - obj.offsetWidth + document.body.scrollLeft;
    pixelTop  = event.clientY + document.body.scrollTop;
    }
    }
    if(judger==3)
    {
    with(obj.style)
    {
    pixelLeft = event.clientX - obj.offsetWidth + document.body.scrollLeft;
    pixelTop  = event.clientY - obj.offsetHeight + document.body.scrollTop;
    }
    }
    mouseWave();
    obj.style.visibility = "visible";
    obj.alphaing = setInterval("menu_alpha_up("+obj.id+","+alphaStep+")",menuSpeed);
    }
    }
    //---------- IE MouseDown --------------//
    function document.onmousedown()
    {
    if(event.button==1)
    {
    HideMenu();
    var obj = eval(JustMenuID)
    if(obj.alphaing)
    {
    clearInterval(obj.alphaing);
    }
    obj.alphaing = setInterval("menu_alpha_down("+obj.id+","+alphaStep+")",menuSpeed);
    }
    }
    //----->
    </SCRIPT>
    <SCRIPT>
    var one = new MouseMenu("one");
    one.addMenu("菜单一",1,"javascript:alert('I am menu');","_self","I am title");
    one[0].addLink("连接一",2,"javascript:open('http://www.CsrCode.cn')")
    one[0].addHR()
    one[0].addLink("连接二","","javascript:open('http://www.CsrCode.cn')")
    one[0].addMenu("菜单三");
    one[0][one[0].length-1].addLink("连接一",1,"javascript:;")
    one[0].addLink("连接三","","javascript:open('http://www.33567.cn')")
    one[0].addLink("连接四","","javascript:open('http://www.CsrCode.cn')")
    one.addLink("连接二","","javascript:open('http://www.CsrCode.cn')")
    one.addMenu("菜单二",3);
    one[2].addLink("连接一","","javascript:open('http://www.CsrCode.cn')")
    one.addHR();
    one.addLink("连接三，多长都可以",4,"javascript:open('http://www.CsrCode.cn')")
    </SCRIPT>
    <P><FONT color=#1a71e6>点击右键菜单，有声音的哦…… 可以关闭！设置 mouseCanSound = false;
    就可以了</FONT></P>
    <br><br><hr>
    </BODY></HTML>