masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > tutorial js > teks badan

JS menyedari meniru kod kesan menu klik kanan Windows tanpa menggunakan kemahiran pictures_javascript

WBOY
Lepaskan： 2016-05-16 15:35:47
asal
1408 orang telah melayarinya

Contoh dalam artikel ini menerangkan kod JS untuk meniru kesan menu klik kanan Windows tanpa menggunakan imej. Kongsikan dengan semua orang untuk rujukan anda, butirannya adalah seperti berikut:

Berikut ialah demonstrasi JS meniru kesan menu klik kanan Windows tanpa menggunakan imej Kod ini secara fleksibel menggunakan aksara Wending, dan bekerjasama dengan CSS dan JS untuk mencipta sesuatu yang hampir sama dengan menu klik kanan sistem.

Tangkapan skrin kesan berjalan adalah seperti berikut:

Alamat demo dalam talian adalah seperti berikut:

http://demo.jb51.net/js/2015/js-windows-right-button-menu-codes/

Kod khusus adalah seperti berikut: 

<HTML>
<HEAD>
<TITLE>极酷的多级右键菜单</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> 请点击右键</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","鱼米之乡","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","+","超级玛力","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","+","源码爱好者","f_bbs","http://www.jb51.net/");
menu.AddExtendMenu("f_webpage","folder","16","网页制作","fav",null);
menu.AddItem("f_webpage1","html","","<font disabled>(空)</font>","f_webpage","http://baidu.com");
menu.AddExtendMenu("f_study","folder","16","网上学习","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","设置<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","+","任务栏和开始菜单(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"," 注销<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>
Salin selepas log masuk

Saya harap artikel ini akan membantu semua orang dalam pengaturcaraan JavaScript.

Label berkaitan：
js 右键菜单
sumber：php.cn
Artikel sebelumnya：Penjelasan terperinci tentang cara JavaScript mengendalikan elemen HTML dan gaya_Pengetahuan asas Artikel seterusnya：13 fungsi PHP yang sangat praktikal, yang manakah anda tahu?
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
Bolehkah kumpulan pekerja yang diisytiharkan dalam berbilang laluan masih mengekalkan penggunaan cpunya tanpa mengambil berat tentang ambang Saya berharap untuk mencari sistem node.js dengan kumpulan pekerja untuk mengendalikan tug...
daripada 2024-04-06 19:54:23
0
1
444
Titik Scatterplot tidak mengekalkan nilai semasa mengezum masuk d3.js Ini adalah kali pertama saya menggunakan d3.js, jadi harap bersabar. Saya melaksanakannya ...
daripada 2024-04-06 18:16:26
0
1
403
Tunjukkan panel sisi tersembunyi: ditandai Saya ingin mempunyai menu navigasi dalam panel sisi dengan keupayaan untuk beralih kepada ...
daripada 2024-04-06 15:49:33
0
1
319
Patutkah kita menggunakan SSG untuk menggunakan papan pemuka yang dibuat dengan Nuxt.js? Kami akan membangunkan papan pemuka untuk kegunaan dalaman menggunakan Nuxt.js. Memandangk...
daripada 2024-04-06 13:17:44
0
1
493
Elektron mendapat AppData pada pramuat Bagaimana untuk mendapatkan direktori AppData yang dipramuat? Background.js[...]asyncfunct...
daripada 2024-04-06 11:05:31
0
1
417
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan