网页上模仿桌面右键菜单--网页导航特效

<style type="text/css"> <!-- body {font-size: 9pt;} table {font-size: 9pt; cursor: default; margin: 0;} tr {height: 20;} tr.over {font-size: 9pt; color: #ffffff; background-color: #000080; cursor: default;} tr.out {font-size: 9pt; color: #000000; background-color: #D4D0C8; cursor: default;} div.rm_div {position: absolute; filter: Alpha(Opacity='95'); display: none; background-color: #D4D0C8; border: 2px outset #FFFFFF;width: 0; height: 0;padding:1} hr.sperator {width:95%;border: 1px inset #FFFFFF;} --> </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"; // rbpm = right button pop menu HTMLstr += "<table width='100%' border='0' cellspacing='0'>\n"; HTMLstr += "<!-- Insert A Extend Menu or Item On Here For E_rbpm -->\n"; HTMLstr += "</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,name,parent) { var TempStr = ""; eval("A_"+parent+".length++"); eval("A_"+parent+"[A_"+parent+".length-1] = id"); // 将此项注册到父菜单项的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 += " "+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,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 += " "+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; 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_author(){alert("butong.net")} --> </script> <script language="JScript"> <!-- var menu = new RightMenu(); menu.AddExtendMenu("d_setting"," 活动桌面","rbpm"); menu.AddItem("ca_yesky1","自定义桌面","d_setting","http://www.cctv.com"); menu.AddItem("sperator","","C_program",null); menu.AddItem("cp_51js","无忧脚本","C_program","http://www.cctv.com/"); menu.AddExtendMenu("range_icon"," 排列图标","rbpm"); menu.AddItem("setico","自动排列","range_icon",null); menu.AddItem("exit","退出","leave",null); menu.AddItem("folder_setting"," 自定义文件夹(<u>C</u>)...","rbpm",null); menu.AddItem("refresh"," 刷新","rbpm",null); menu.AddItem("sperator","","rbpm",null); menu.AddItem("phase"," <font disabled>粘贴</font> CTRL+Z","rbpm",null); menu.AddExtendMenu("n_files"," 新建","rbpm"); menu.AddItem("f_folder","文件夹","n_files","http://www.cctv.com/"); menu.AddItem("shortcut","快捷方式","n_files","http://www.cctv.com/"); menu.AddItem("sperator","","n_files",""); menu.AddItem("f_txt","Microsoft Word 文档","n_files","http://www.cctv.com/"); menu.AddItem("f_htm","Microsoft Excel 工作表","n_files","http://www.cctv.com/"); menu.AddItem("sperator","","rbpm",null); menu.AddItem("folder_pro"," 属性","rbpm",null); document.writeln(menu.GetMenu()); --> </script>