WINDOWS XP风格的鼠标右键菜单_键盘鼠标特效

WINDOWS XP风格的鼠标右键菜单,您可以先修改部分代码再运行.

<HTML><HEAD><TITLE>mouse-menu</TITLE>
<META mrc="text/html; charset=gb2312" http-equiv=Content-Type>
<META mrc="MSHTML 5.00.2614.3500" name=GENERATOR>
<META mrc=FrontPage.Editor.Document name=ProgId>
<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 = "icon/edit.gif";
        
        IconList[2] = new Image();
        
        IconList[2].src = "http://p1.mb5u.com/texiao/18/20100523005055128.gif";

IconList[3] = new Image();
        
        IconList[3].src = "icon/com.gif";        
        
        IconList[4] = new Image();
        
        IconList[4].src = "icon/hel.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="http://p1.mb5u.com/texiao/18/20100523005055127.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="http://p1.mb5u.com/texiao/18/20100523005055128.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"> </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="http://p1.mb5u.com/texiao/18/20100523005055127.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="http://p1.mb5u.com/texiao/18/20100523005055128.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"> </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)-----------------//

//----------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 -------//

//------------ 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);

}
}

//---------- 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:alert('I am link')")
                one[0].addHR()
                one[0].addLink("连接二","","javascript:alert('I am link')")                
                one[0].addMenu("菜单三");
                        one[0][one[0].length-1].addLink("连接一",1,"javascript:;")
                one[0].addLink("连接三","","javascript:alert('I am link')")
                one[0].addLink("连接四","","javascript:alert('I am link')")
        one.addLink("连接二","","javascript:alert('I am link')")
        one.addMenu("菜单二",3);
                one[2].addLink("连接一","","javascript:alert('I am link')")
        one.addHR();
        one.addLink("连接三，多长都可以",4,"javascript:alert('I am link')")

</SCRIPT>

<P><FONT color=#1a71e6>有声音的哦…… 可以关闭！设置 mouseCanSound = false; 
就可以了</FONT></P></BODY></HTML>

所属频道：键盘鼠标特效/更新时间：2012-09-16

[收藏][报错][返回列表]

WINDOWS XP风格的鼠标右键菜单_键盘鼠标特效

键盘鼠标特效Rss订阅特效代码搜索

键盘鼠标特效推荐

猜你也喜欢看这些