<html> <head> <title> Context Menu </title> <style> .menu {position:absolute;top:;left:;font-family:ms sans serif;font-size:8;color:black;background:F1F1F1;border-style:solid;border-width:1;border-color:0A246A;width:170;padding:3 3 3 3;} .m_stat{background:;border-style:solid;border-width:1;border-color:F1F1F1;width:100%;padding:3 3 3 3;cursor:default;filter:gray()} .m_over{background:B6BDD2;border-style:solid;border-width:1;border-color:0A246A;width:100%;padding:3 3 3 3;cursor:default;} .shadow{position:absolute;top:0;left:0;height:0;width:0;background:black;filter:alpha(opacity=20 blur(add=0,direction=275,strength=5));font-family:ms sans serif;font-size:0;visibility:hidden;} </style> <script language="JavaScript1.2"> img1 = new Image();img1.src = "I.gif"; img2 = new Image();img2.src = "I.gif"; img3 = new Image();img3.src = "I.gif"; img4 = new Image();img4.src = "I.gif"; img5 = new Image();img5.src = "I.gif"; img6 = new Image();img6.src = "I.gif"; function show_context_menu(){ var rightedge=document.body.clientWidth-event.clientX var bottomedge=document.body.clientHeight-event.clientY if (rightedge<context_menu.offsetWidth){ context_menu.style.left=document.body.scrollLeft+event.clientX-context_menu.offsetWidth }else{ context_menu.style.left=document.body.scrollLeft+event.clientX } if (bottomedge<context_menu.offsetHeight){ context_menu.style.top=document.body.scrollTop+event.clientY-context_menu.offsetHeight }else{ context_menu.style.top=document.body.scrollTop+event.clientY } if(context_menu.offsetTop<0){ context_menu.style.top=1 } context_shadow.style.height =parseInt(context_menu.offsetHeight) context_shadow.style.width =parseInt(context_menu.offsetWidth) context_shadow.style.left =(parseInt(context_menu.offsetLeft)+5) context_shadow.style.top =(parseInt(context_menu.offsetTop)+5) context_menu.style.visibility ="visible" context_shadow.style.visibility ="visible" return false } function hide_context_menu(){ context_menu.style.visibility="hidden" context_shadow.style.visibility="hidden" } document.oncontextmenu=show_context_menu function clicked(val) { alert("You clicked"+val) } </script> </head> <body onload="hide_context_menu()" onclick='hide_context_menu()'> <span id="context_shadow" class="shadow"></span> <div id="context_menu" class="menu"> <div id="item1" class="m_stat" onmouseover="this.className='m_over'" onmouseout="this.className='m_stat'" onclick="clicked(this.innerText)"> <img src="info.gif" align="absmiddle" height="17" width="17"> Context Item 1</div> <div id="item2" class="m_stat" onmouseover="this.className='m_over'" onmouseout="this.className='m_stat'" onclick="clicked(this.innerText)"> <img src="shutdown.gif" align="absmiddle" height="17" width="17"> Context Item 2</div> <hr> <div id="item3" class="m_stat" onmouseover="this.className='m_over'" onmouseout="this.className='m_stat'" onclick="clicked(this.innerText)"> <img src="stop.gif" align="absmiddle" height="17" width="17"> Context Item 3</div> <div id="item4" class="m_stat" onmouseover="this.className='m_over'" onmouseout="this.className='m_stat'" onclick="clicked(this.innerText)"> <img src="find.gif" align="absmiddle" height="17" width="17"> Context Item 4</div> <div id="item5" class="m_stat" onmouseover="this.className='m_over'" onmouseout="this.className='m_stat'" onclick="clicked(this.innerText)"> <img src="help.gif" align="absmiddle" height="17" width="17"> Context Item 5</div> <div id="item6" class="m_stat" onmouseover="this.className='m_over'" onmouseout="this.className='m_stat'" onclick="clicked(this.innerText)"> <img src="findfiles.gif" align="absmiddle" height="17" width="17"> Context Item 6</div> </div> <center> <span style="font-family:ms sans serif;font-size:25;z-index:0;"><u>Context (Right Click)Menu</u> <br><br> <font size="2" face="ms sans serif"> <ul> <li>Easy to edit menu components. <li>Unlimited number of menu components. </ul> <br><br><br> Right click anywhere for menu... <br><br> </font> </center> </body> </html> [Ctrl+A 全部选择 提示：你可先修改部分代码，再按运行]
