JS實(shí)現(xiàn)不使用圖片仿Windows右鍵菜單效果代碼
本文實(shí)例講述了JS實(shí)現(xiàn)不使用圖片仿Windows右鍵菜單效果代碼。分享給大家供大家參考,具體如下:
這里演示JS不使用圖片仿Windows右鍵菜單效果,這款代碼靈活使用了文鼎字,配合CSS和JS做出了這個(gè)和系統(tǒng)右鍵菜單很相似的東東。
運(yùn)行效果截圖如下:
在線演示地址如下:
http://demo.jb51.net/js/2015/js-windows-right-button-menu-codes/
具體代碼如下:
<HTML> <HEAD> <TITLE>極酷的多級(jí)右鍵菜單</TITLE> <META content="text/html; charset=gb2312" http-equiv=Content-Type> <STYLE type=text/css>BODY { FONT-SIZE: 12px; } .info{FONT-SIZE: 14px;color:#FFFFFF;font-family:@Tahoma,@宋體;width:20px} TABLE { CURSOR: default; FONT-SIZE: 12px; MARGIN: 0px } TR { HEIGHT: 20px } TR.over { BACKGROUND-COLOR: #000080; COLOR: #ffffff; CURSOR: default; FONT-SIZE: 12px } TR.out { BACKGROUND-COLOR: #efefef; COLOR: #000000; FONT-SIZE: 12px } DIV.rm_div { BACKGROUND-COLOR: #efefef; BORDER-BOTTOM: #ffffff 1px outset; BORDER-LEFT: #ffffff 1px outset; BORDER-RIGHT: #ffffff 1px outset; BORDER-TOP: #ffffff 1px outset; DISPLAY: none; FILTER: Alpha(Opacity='95'); HEIGHT: 0px; PADDING-BOTTOM: 1px; PADDING-LEFT: 1px; PADDING-RIGHT: 1px; PADDING-TOP: 1px; POSITION: absolute; WIDTH: 0px } HR.sperator { BORDER-BOTTOM: #ffffff 1px inset; BORDER-LEFT: #ffffff 1px inset; BORDER-RIGHT: #ffffff 1px inset; BORDER-TOP: #ffffff 1px inset; WIDTH: 95% } .w2kfont { FONT-FAMILY: Tahoma; FONT-SIZE: 8pt } </STYLE> <SCRIPT language=JScript> <!-- function RightMenu() { this.AddExtendMenu=AddExtendMenu; this.AddItem=AddItem; this.GetMenu=GetMenu; this.HideAll=HideAll; this.I_OnMouseOver=I_OnMouseOver; this.I_OnMouseOut=I_OnMouseOut; this.I_OnMouseUp=I_OnMouseUp; this.P_OnMouseOver=P_OnMouseOver; this.P_OnMouseOut=P_OnMouseOut; A_rbpm = new Array(); HTMLstr = ""; HTMLstr += "<!-- RightButton PopMenu -->\n"; HTMLstr += "\n"; HTMLstr += "<!-- PopMenu Starts -->\n"; HTMLstr += "<div id='E_rbpm' class='rm_div'>\n"; HTMLstr += "<table width='100%' border='0' cellspacing='0'>\n"; HTMLstr += "<tr><td height='264' width='20' valign='bottom' bgcolor='#000000' onclick=window.event.cancelBubble=true; class=info>娃海作制"; HTMLstr += "</td><td height='264' width='120' style='padding: 1' valign='bottom'>\n"; HTMLstr += "<table width='100%' border='0' cellspacing='0'>\n"; HTMLstr += "<!-- Insert A Extend Menu or Item On Here For E_rbpm -->\n"; HTMLstr += "</table></td></tr></table>\n"; HTMLstr += "</div>\n"; HTMLstr += "<!-- Insert A Extend_Menu Area on Here For E_rbpm -->"; HTMLstr += "\n"; HTMLstr += "<!-- PopMenu Ends -->\n"; } function AddExtendMenu(id,img,wh,name,parent) { var TempStr = ""; eval("A_"+parent+".length++"); eval("A_"+parent+"[A_"+parent+".length-1] = id"); TempStr += "<div id='E_"+id+"' class='rm_div'>\n"; TempStr += "<table width='100%' border='0' cellspacing='0'>\n"; TempStr += "<!-- Insert A Extend Menu or Item On Here For E_"+id+" -->"; TempStr += "</table>\n"; TempStr += "</div>\n"; TempStr += "<!-- Insert A Extend_Menu Area on Here For E_"+id+" -->"; TempStr += "<!-- Insert A Extend_Menu Area on Here For E_"+parent+" -->"; HTMLstr = HTMLstr.replace("<!-- Insert A Extend_Menu Area on Here For E_"+parent+" -->",TempStr); eval("A_"+id+" = new Array()"); TempStr = ""; TempStr += "<!-- Extend Item : P_"+id+" -->\n"; TempStr += "<tr id='P_"+id+"' class='out'"; TempStr += " onmouseover='P_OnMouseOver(\""+id+"\",\""+parent+"\")'"; TempStr += " onmouseout='P_OnMouseOut(\""+id+"\",\""+parent+"\")'"; TempStr += " onmouseup=window.event.cancelBubble=true;"; TempStr += " onclick=window.event.cancelBubble=true;"; TempStr += "><td nowrap>"; TempStr += "<font face='Wingdings' style='font-size:18px'>0</font> "+name+" </td><td style='font-family: webdings; text-align: ;'>4"; TempStr += "</td></tr>\n"; TempStr += "<!-- Insert A Extend Menu or Item On Here For E_"+parent+" -->"; HTMLstr = HTMLstr.replace("<!-- Insert A Extend Menu or Item On Here For E_"+parent+" -->",TempStr); } function AddItem(id,img,wh,name,parent,location) { var TempStr = ""; var ItemStr = "<!-- ITEM : I_"+id+" -->"; if(id == "sperator") { TempStr += ItemStr+"\n"; TempStr += "<tr class='out' onclick='window.event.cancelBubble=true;' onmouseup='window.event.cancelBubble=true;'><td colspan='2' height='1'><hr class='sperator'></td></tr>"; TempStr += "<!-- Insert A Extend Menu or Item On Here For E_"+parent+" -->"; HTMLstr = HTMLstr.replace("<!-- Insert A Extend Menu or Item On Here For E_"+parent+" -->",TempStr); return; } if(HTMLstr.indexOf(ItemStr) != -1) { alert("I_"+id+"already exist!"); return; } TempStr += ItemStr+"\n"; TempStr += "<tr id='I_"+id+"' class='out'"; TempStr += " onmouseover='I_OnMouseOver(\""+id+"\",\""+parent+"\")'"; TempStr += " onmouseout='I_OnMouseOut(\""+id+"\")'"; TempStr += " onclick='window.event.cancelBubble=true;'"; if(location == null) TempStr += " onmouseup='I_OnMouseUp(\""+id+"\",\""+parent+"\",null)'"; else TempStr += " onmouseup='I_OnMouseUp(\""+id+"\",\""+parent+"\",\""+location+"\")'"; TempStr += "><td nowrap>"; TempStr +="<font face='Wingdings' style='font-size:18px'>"+wh+"</font> "+ name+" ";// TempStr += "</td><td></td></tr>\n"; TempStr += "<!-- Insert A Extend Menu or Item On Here For E_"+parent+" -->"; HTMLstr = HTMLstr.replace("<!-- Insert A Extend Menu or Item On Here For E_"+parent+" -->",TempStr); } function GetMenu() { return HTMLstr; } function I_OnMouseOver(id,parent) { var Item; if(parent != "rbpm") { var ParentItem; ParentItem = eval("P_"+parent); ParentItem.className="over"; } Item = eval("I_"+id); Item.className="over"; HideAll(parent,1); } function I_OnMouseOut(id) { var Item; Item = eval("I_"+id); Item.className="out"; } function I_OnMouseUp(id,parent,location) { var ParentMenu; window.event.cancelBubble=true; OnClick(); ParentMenu = eval("E_"+parent); ParentMenu.display="none"; if(location == null) eval("Do_"+id+"()"); else window.open(location); } function P_OnMouseOver(id,parent) { var Item; var Extend; var Parent; if(parent != "rbpm") { var ParentItem; ParentItem = eval("P_"+parent); ParentItem.className="over"; } HideAll(parent,1); Item = eval("P_"+id); Extend = eval("E_"+id); Parent = eval("E_"+parent); Item.className="over"; Extend.style.display="block"; Extend.style.posLeft=document.body.scrollLeft+Parent.offsetLeft+Parent.offsetWidth-4; if(Extend.style.posLeft+Extend.offsetWidth > document.body.scrollLeft+document.body.clientWidth) Extend.style.posLeft=Extend.style.posLeft-Parent.offsetWidth-Extend.offsetWidth+8; if(Extend.style.posLeft < 0) Extend.style.posLeft=document.body.scrollLeft+Parent.offsetLeft+Parent.offsetWidth; Extend.style.posTop=Parent.offsetTop+Item.offsetTop+1; if(Extend.style.posTop+Extend.offsetHeight > document.body.scrollTop+document.body.clientHeight) Extend.style.posTop=document.body.scrollTop+document.body.clientHeight-Extend.offsetHeight; if(Extend.style.posTop < 0) Extend.style.posTop=0; } function P_OnMouseOut(id,parent) { } function HideAll(id,flag) { var Area; var Temp; var i; if(!flag) { Temp = eval("E_"+id); Temp.style.display="none"; } Area = eval("A_"+id); if(Area.length) { for(i=0; i < Area.length; i++) { HideAll(Area[i],0); Temp = eval("E_"+Area[i]); Temp.style.display="none"; Temp = eval("P_"+Area[i]); Temp.className="out"; } } } document.onmouseup=OnMouseUp; document.onclick=OnClick; function OnMouseUp() { if(window.event.button == 2) { var PopMenu; PopMenu = eval("E_rbpm"); HideAll("rbpm",0); PopMenu.style.display="block"; PopMenu.style.posLeft=document.body.scrollLeft+window.event.clientX; PopMenu.style.posTop=document.body.scrollTop+window.event.clientY; if(PopMenu.style.posLeft+PopMenu.offsetWidth > document.body.scrollLeft+document.body.clientWidth) PopMenu.style.posLeft=document.body.scrollLeft+document.body.clientWidth-PopMenu.offsetWidth; if(PopMenu.style.posLeft < 0) PopMenu.style.posLeft=0; if(PopMenu.style.posTop+PopMenu.offsetHeight > document.body.scrollTop+document.body.clientHeight) PopMenu.style.posTop=document.body.scrollTop+document.body.clientHeight-PopMenu.offsetHeight; if(PopMenu.style.posTop < 0) PopMenu.style.posTop=0; } } function OnClick() { HideAll("rbpm",0); } // Add Your Function on following function Do_viewcode(){window.location="view-source:"+window.location.href;} function Do_help(){window.showHelp(window.location);} function Do_exit() {window.close();} function Do_refresh() {window.location.reload();} function Do_back() {history.back();} function Do_forward() {history.forward();} function Do_help(){alert("幫助")} --> </SCRIPT> <META content="MSHTML 5.00.2920.0" name=GENERATOR></HEAD> <BODY bgColor=#336699 oncontextmenu=window.event.returnValue=false> <DIV id=snwcwt> 請(qǐng)點(diǎn)擊右鍵</DIV> <SCRIPT language=JScript> <!-- var menu = new RightMenu(); menu.AddItem("update","start_update","4","<font class=w2kfont>Web Update</font>","rbpm","http://baidu.com/"); menu.AddItem("suan","suan","a","魚(yú)米之鄉(xiāng)","rbpm","http://baidu.com"); menu.AddItem("sperator","","","","rbpm",null); menu.AddExtendMenu("program","start_pro","24","程序<font class=w2kfont>(<u>P</u>)</font>","rbpm",null); menu.AddExtendMenu("p_acc","folder","+","附件","program",null); menu.AddItem("p_acc1","html","+","<font class=w2kfont>Microsoft FrontPage 2000</font>","program","51w/"); menu.AddItem("p_acc2","html","+","<font class=w2kfont>Norton AntiVirus Corporate Edition</font>","program","http://baidu.com"); menu.AddExtendMenu("p_lgame","folder","16","小游戲","p_acc",null); menu.AddItem("p_game1","folder","+","掃雷","p_lgame","http://baidu.com/"); menu.AddItem("p_game2","folder","+","超級(jí)瑪力","p_lgame","http://baidu.com/"); menu.AddExtendMenu("doc","start_doc","24","文檔<font class=w2kfont>(<u>D</u>)</font>","rbpm",null); menu.AddItem("d_photo","folder","+","官方博客","doc",null); menu.AddExtendMenu("fav","start_fav","24","收藏<font class=w2kfont>(<u>A</u>)</font>","rbpm",null); menu.AddExtendMenu("f_bbs","folder","16","論壇","fav",null); menu.AddItem("f_bbs2","html","+","百度搜索","f_bbs","http://baidu.com/"); menu.AddItem("f_bbs3","html","+","源碼愛(ài)好者","f_bbs","http://www.dbjr.com.cn/"); menu.AddExtendMenu("f_webpage","folder","16","網(wǎng)頁(yè)制作","fav",null); menu.AddItem("f_webpage1","html","","<font disabled>(空)</font>","f_webpage","http://baidu.com"); menu.AddExtendMenu("f_study","folder","16","網(wǎng)上學(xué)習(xí)","fav",null); menu.AddItem("f_s1","html","","<font disabled>(空)</font>","f_study","http://matrix.hongen.com/forum/"); menu.AddExtendMenu("f_link","folder","16","友情鏈接","fav",null); menu.AddItem("f_link1","html","+","CodeFans.net","f_link","http://baidu.com"); menu.AddExtendMenu("setting","start_set","24","設(shè)置<font class=w2kfont>(<u>S</u>)</font>","rbpm",null); menu.AddItem("s_panel","folder","+","控制面板(C)","setting","http://baidu.com"); menu.AddItem("sperator","","","","setting",null); menu.AddItem("s_data","s_user","+","用戶資料(D)","setting","http://baidu.com"); menu.AddItem("s_display1","s_taskbar","+","任務(wù)欄和開(kāi)始菜單(T)","setting","http://baidu.com"); menu.AddExtendMenu("find","start_find","24","查找<font class=w2kfont>(<u>F</u>)","rbpm",null); menu.AddItem("l_search","search","4","文件或文件夾上(<u>F</u>)...","find","http://baidu.com"); menu.AddItem("u_search","f_user","4","用戶(<u>P</u>)...","find","http://baidu.com"); menu.AddItem("help","start_help","V"," 幫助<font class=w2kfont>(<u>H</u>)</font>","rbpm",null); menu.AddItem("sperator","","","","rbpm",null); menu.AddItem("logoff","start_logoff","v"," 注銷(xiāo)<font class=w2kfont>(<u>L</u>)</font>","rbpm",null); menu.AddItem("shut","start_shut","x","退出<font class=w2kfont>(<u>U</u>)</font>","rbpm",null); document.writeln(menu.GetMenu()); --> </SCRIPT> </TD></TR> </TABLE> </BODY> </HTML>
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
相關(guān)文章
JavaScript lodash常見(jiàn)用法系列小結(jié)
本篇文章主要介紹了JavaScript lodash用法小結(jié),非常不錯(cuò),具有參考借鑒價(jià)值,對(duì)于Javascript lodash教程感興趣的同學(xué)可以參考一下2016-08-08微信小程序開(kāi)發(fā)之選項(xiàng)卡(窗口底部TabBar)頁(yè)面切換
本文主要介紹了微信小程序開(kāi)發(fā)之選項(xiàng)卡(窗口底部TabBar)頁(yè)面切換的相關(guān)知識(shí)。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-04-04無(wú)阻塞加載js,防止因js加載不了影響頁(yè)面顯示的問(wèn)題
下面小編就為大家?guī)?lái)一篇無(wú)阻塞加載js,防止因js加載不了影響頁(yè)面顯示的問(wèn)題。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)2016-12-12velocity.js實(shí)現(xiàn)頁(yè)面滾動(dòng)切換效果
這篇文章主要介紹了velocity.js實(shí)現(xiàn)頁(yè)面滾動(dòng)切換效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-10-10javascript之textarea打字機(jī)效果提示代碼推薦
非常不錯(cuò)的提示輸入內(nèi)容,動(dòng)態(tài)的提示,給人親切感2008-09-09JavaScript設(shè)計(jì)模式發(fā)布訂閱模式
這篇文章主要介紹了JavaScript設(shè)計(jì)模式發(fā)布訂閱模式,發(fā)布訂閱設(shè)計(jì)模式是和觀察者設(shè)計(jì)模式基本上相同,但是他們兩個(gè)設(shè)計(jì)模式不同的是發(fā)布訂閱者擁有一個(gè)事件處理中心而觀察者并沒(méi)有2022-06-06