怎么实现这种效果

<script>
    window.onload = function()
{
    document.oncontextmenu = function()
{
              ShowDiv("block");
  return false;
}
}

function ShowDiv(flag)
{
var oDiv = document.getElementById("pubDv");
e = window.event;
var x = e.clientX;
var y = e.clientY;
oDiv.style.top = y;
oDiv.style.left = x;
oDiv.style.display = flag;
}</script><body>
<div  id="pubDv" style="display:none;width:200px; z-index:0;overflow:auto;position:absolute; border:#000000 1px dashed; background:#CCFFCC;">
<table>
<tr><td style="cursor:hand; width:25; background:#999966;" onclick="alert('a');ShowDiv('none');">aaaaaaaaa</td></tr>
<tr><td style="cursor:hand; width:25; background:#999966;" onclick="alert('b');ShowDiv('none');">bbbbbbbbb</td></tr>
<tr><td style="cursor:hand; width:25; background:#999966;" onclick="alert('c');ShowDiv('none');">ccccccccc</td></tr>
<tr><td style="cursor:hand; width:25; background:#999966;" onclick="alert('d');ShowDiv('none');">ddddddddd</td></tr>
</table>
</div></body>

解决方案 »

  1.   

    <html> 
    <style> 
    div.contextmenu{
     background-color:threedface;border-style:outset;border-width:2;position:absolute;visibility:hidden;z-index:999
    } 
    </style> 
    <body> 
    <img src='http://www.baidu.com/img/logo-yy.gif' width=100 height=95 >
    <div id=cmenu class=contextmenu> 
    <table>
    <tr><td><a href="#">dddd</a></td></tr>
    <tr><td><a href="#">dddd</a></td></tr>
    </table>
    </div> 
    </body> 
    <script> function document.oncontextmenu() { 
      var e=event.srcElement; 
      var l=event.offsetX;; 
      var t=event.offsetY; 
      do { 
        l+=e.offsetLeft; 
        t+=e.offsetTop; 
      }while(e=e.offsetParent); 
        cmenu.style.pixelLeft=l; 
        cmenu.style.pixelTop=t; 
        cmenu.style.visibility="visible"; 
        event.returnValue=false; 
      } function cmenu.oncontextmenu(){ 
      event.cancelBubble=true; 
      event.returnValue=false; 
    }function window.onbeforeunload() { 
      cmenu.style.visibility="hidden"; 
    } function document.onclick() { 
      cmenu.style.visibility="hidden"; 
    } 
    </script> 
    </html>
      

  2.   

    针对天一的方法做了改进
    <script>
        function aa()
    {
        document.oncontextmenu = function()
    {
                  ShowDiv("block");
      return false;
    }
    }
    function ShowDiv(flag)
    {
    var oDiv = document.getElementById("pubDv");
    e = window.event;
    var x = e.clientX;
    var y = e.clientY;
    oDiv.style.top = y;
    oDiv.style.left = x;
    oDiv.style.display = flag;
    }</script><body>
     <img src="http://www.baidu.com/img/logo-yy.gif" onMouseDown="aa()">
    <div  id="pubDv" style="display:none;width:200px; z-index:0;overflow:auto;position:absolute; border:#000000 1px dashed; background:#CCFFCC;">
    <table>
    <tr><td style="cursor:hand; width:25; background:#999966;" onclick="alert('a');ShowDiv('none');">aaaaaaaaa</td></tr>
    <tr><td style="cursor:hand; width:25; background:#999966;" onclick="alert('b');ShowDiv('none');">bbbbbbbbb</td></tr>
    <tr><td style="cursor:hand; width:25; background:#999966;" onclick="alert('c');ShowDiv('none');">ccccccccc</td></tr>
    <tr><td style="cursor:hand; width:25; background:#999966;" onclick="alert('d');ShowDiv('none');">ddddddddd</td></tr>
    </table>
    </div></body>
      

  3.   

    再更正一下
    <script>
        function aa()
    {
        document.oncontextmenu = function()
    {
                  ShowDiv("block");
      return false;
    }
    }
    function  bb()
    {
        document.oncontextmenu = function()
    {
      return true;
    }
    }
    function ShowDiv(flag)
    {
    var oDiv = document.getElementById("pubDv");
    e = window.event;
    var x = e.clientX;
    var y = e.clientY;
    oDiv.style.top = y;
    oDiv.style.left = x;
    oDiv.style.display = flag;
    }</script><body>
     <img src="http://www.baidu.com/img/logo-yy.gif" onMouseDown="aa()" onMouseOut="bb()">
    <div  id="pubDv" style="display:none;width:200px; z-index:0;overflow:auto;position:absolute; border:#000000 1px dashed; background:#CCFFCC;">
    <table>
    <tr><td style="cursor:hand; width:25; background:#999966;" onclick="alert('a');ShowDiv('none');">aaaaaaaaa</td></tr>
    <tr><td style="cursor:hand; width:25; background:#999966;" onclick="alert('b');ShowDiv('none');">bbbbbbbbb</td></tr>
    <tr><td style="cursor:hand; width:25; background:#999966;" onclick="alert('c');ShowDiv('none');">ccccccccc</td></tr>
    <tr><td style="cursor:hand; width:25; background:#999966;" onclick="alert('d');ShowDiv('none');">ddddddddd</td></tr>
    </table>
    </div></body>
      

  4.   

    再改进一下<!--<script language="JavaScript"> 
    if (window.Event) 
      document.captureEvents(Event.MOUSEUP); 
     
    function nocontextmenu() 
    {
     event.cancelBubble = true
     event.returnValue = false;
     
     return false;
    }
     
    function norightclick(e) 
    {
     if (window.Event) 
     {
      if (e.which == 2 || e.which == 3)
       return false;
     }
     else
      if (event.button == 2 || event.button == 3)
      {
       event.cancelBubble = true
       event.returnValue = false;
       return false;
      }
     
    }
     
    document.oncontextmenu = nocontextmenu;  // for IE5+
    document.onmousedown = norightclick;  // for all others
    </script>-->
    <!--<html> 
    <style> 
    div.contextmenu{
     background-color:threedface;border-style:outset;border-width:2;position:absolute;visibility:hidden;z-index:999
    } 
    </style> 
    <body> 
    <img src='http://www.baidu.com/img/logo-yy.gif' width=100 height=95 >
    <div id=cmenu class=contextmenu> 
    <table>
    <tr><td><a href="#">dddd</a></td></tr>
    <tr><td><a href="#">dddd</a></td></tr>
    </table>
    </div> 
    </body> 
    <script> function document.oncontextmenu() { 
      var e=event.srcElement; 
      var l=event.offsetX;; 
      var t=event.offsetY; 
      do { 
        l+=e.offsetLeft; 
        t+=e.offsetTop; 
      }while(e=e.offsetParent); 
        cmenu.style.pixelLeft=l; 
        cmenu.style.pixelTop=t; 
        cmenu.style.visibility="visible"; 
        event.returnValue=false; 
      } function cmenu.oncontextmenu(){ 
      event.cancelBubble=true; 
      event.returnValue=false; 
    }function window.onbeforeunload() { 
      cmenu.style.visibility="hidden"; 
    } function document.onclick() { 
      cmenu.style.visibility="hidden"; 
    } 
    </script> 
    </html>
    --><script>
        function aa()
    {
        document.oncontextmenu = function()
    {
                  ShowDiv("block");
      return false;
    }
    }
    function  bb()
    {
        document.oncontextmenu = function()
    {
      return true;
    }
    }
    function ShowDiv(flag)
    {
    var oDiv = document.getElementById("pubDv");
    e = window.event;
    var x = e.clientX;
    var y = e.clientY;
    oDiv.style.top = y;
    oDiv.style.left = x;
    oDiv.style.display = flag;
    }</script><body>
     <img src="http://www.baidu.com/img/logo-yy.gif" onMouseDown="aa()" onMouseOut="bb()">
    <div  id="pubDv" style="display:none;z-index:0;overflow:auto;position:absolute; border:#F3F3F3 2px solid; background:#999999;">
    <table>
    <tr><td style="cursor:hand; width:25;" 
        onMouseOver="this.style.background='#C6C5BF';" 
        onMouseOut="this.style.background='#999999';" 
    onclick="alert('a');ShowDiv('none');">aaaaaaaaa</td></tr>
    <tr><td style="cursor:hand; width:25;" 
        onMouseOver="this.style.background='#C6C5BF';" 
        onMouseOut="this.style.background='#999999';" 
        onclick="alert('b');ShowDiv('none');">bbbbbbbbb</td></tr>
    <tr><td style="cursor:hand; width:25;" 
        onMouseOver="this.style.background='#C6C5BF';" 
        onMouseOut="this.style.background='#999999';" 
        onclick="alert('c');ShowDiv('none');">cccC2CAB3</td></tr>
    <tr><td style="cursor:hand; width:25;" 
        onMouseOver="this.style.background='#C6C5BF';" 
        onMouseOut="this.style.background='#999999';" 
        onclick="alert('d');ShowDiv('none');">ddddddddd</td></tr>
    </table>
    </div></body>
      

  5.   

    再再再改进一下<!--<script language="JavaScript"> 
    if (window.Event) 
      document.captureEvents(Event.MOUSEUP); 
     
    function nocontextmenu() 
    {
     event.cancelBubble = true
     event.returnValue = false;
     
     return false;
    }
     
    function norightclick(e) 
    {
     if (window.Event) 
     {
      if (e.which == 2 || e.which == 3)
       return false;
     }
     else
      if (event.button == 2 || event.button == 3)
      {
       event.cancelBubble = true
       event.returnValue = false;
       return false;
      }
     
    }
     
    document.oncontextmenu = nocontextmenu;  // for IE5+
    document.onmousedown = norightclick;  // for all others
    </script>-->
    <!--<html> 
    <style> 
    div.contextmenu{
     background-color:threedface;border-style:outset;border-width:2;position:absolute;visibility:hidden;z-index:999
    } 
    </style> 
    <body> 
    <img src='http://www.baidu.com/img/logo-yy.gif' width=100 height=95 >
    <div id=cmenu class=contextmenu> 
    <table>
    <tr><td><a href="#">dddd</a></td></tr>
    <tr><td><a href="#">dddd</a></td></tr>
    </table>
    </div> 
    </body> 
    <script> function document.oncontextmenu() { 
      var e=event.srcElement; 
      var l=event.offsetX;; 
      var t=event.offsetY; 
      do { 
        l+=e.offsetLeft; 
        t+=e.offsetTop; 
      }while(e=e.offsetParent); 
        cmenu.style.pixelLeft=l; 
        cmenu.style.pixelTop=t; 
        cmenu.style.visibility="visible"; 
        event.returnValue=false; 
      } function cmenu.oncontextmenu(){ 
      event.cancelBubble=true; 
      event.returnValue=false; 
    }function window.onbeforeunload() { 
      cmenu.style.visibility="hidden"; 
    } function document.onclick() { 
      cmenu.style.visibility="hidden"; 
    } 
    </script> 
    </html>
    --><script>
        function aa()
    {
        document.oncontextmenu = function()
    {
                  ShowDiv("block");
      return false;
    }
    }
    function  bb()
    {
        document.oncontextmenu = function()
    {
      return true;
    }
    }
    function ShowDiv(flag)
    {
    var oDiv = document.getElementById("pubDv");
    e = window.event;
    var X = e.x;
    var Y = e.y;
    oDiv.style.top = document.body.scrollTop + y + 10;
    oDiv.style.left = document.body.scrollLeft + x + 10;
    oDiv.style.display = flag;
    }</script><body onmouseup="ShowDiv('none')">
     <img src="http://www.baidu.com/img/logo-yy.gif" onMouseDown="aa()" onMouseOut="bb()">
    <div  id="pubDv" style="display:none;z-index:0;overflow:auto;position:absolute; border:#F3F3F3 2px solid; background:#999999;">
    <table>
    <tr><td style="cursor:hand; width:25;" 
        onMouseOver="this.style.background='#C6C5BF';" 
        onMouseOut="this.style.background='#999999';" 
    onclick="alert('a');ShowDiv('none');">aaaaaaaaa</td></tr>
    <tr><td style="cursor:hand; width:25;" 
        onMouseOver="this.style.background='#C6C5BF';" 
        onMouseOut="this.style.background='#999999';" 
        onclick="alert('b');ShowDiv('none');">bbbbbbbbb</td></tr>
    <tr><td style="cursor:hand; width:25;" 
        onMouseOver="this.style.background='#C6C5BF';" 
        onMouseOut="this.style.background='#999999';" 
        onclick="alert('c');ShowDiv('none');">cccC2CAB3</td></tr>
    <tr><td style="cursor:hand; width:25;" 
        onMouseOver="this.style.background='#C6C5BF';" 
        onMouseOut="this.style.background='#999999';" 
        onclick="alert('d');ShowDiv('none');">ddddddddd</td></tr>
    </table>
    </div></body>
      

  6.   

    function ShowDiv(flag)
    {
    var oDiv = document.getElementById("pubDv");
    e = window.event;
    var X = e.x;
    var Y = e.y;
    oDiv.style.top = document.body.scrollTop + y + 10;  // 记号 1
    oDiv.style.left = document.body.scrollLeft + x + 10;  // 记号 2
    oDiv.style.display = flag;
    }
    -----------------------------------------------------------------------------------
    晕，记号 1和记号2小写的x y 改成大写的。
      

  7.   

    我不小心把注释也copy进去了楼主可是一字不差也加上了~``
    看看楼主改进了啥~~
    hoho~~~````````
      

  8.   

    发先一个效果更好的
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <title>系统菜单-51windows.Net</title>
    <head>
    <meta name="keywords" content="51windows.Net">
    <meta http-equiv=Content-Type content="text/html; charset=gb2312">
    </head>
    <body onmousemove="MoveObj()"  onmousedown="MoveObj()" onmouseup="MoveObj()">
    <p>请点右键</p>
    <object id="objContent" classid="clsid:2D360201-FFF5-11D1-8D03-00A0C959BC0A" style="position: absolute; top: 0; left: 0;width:1;height:1;"></object><SCRIPT LANGUAGE="JavaScript">
    <!--
    var ContextMenu = new Array() ;
    function ContextMenuItem(text, command, state){
    this.Text = text ;
    this.Command = command || "void(0)" ;
    this.state = state;
    }ContextMenu[0] = new ContextMenuItem("前进(&B)","go(1)",0);
    ContextMenu[1] = new ContextMenuItem("后退(&O)","go(-1)",2);
    ContextMenu[2] = new ContextMenuItem("未选中(&S)","s()",0);
    ContextMenu[3] = new ContextMenuItem("","",0);
    ContextMenu[4] = new ContextMenuItem("无忧视窗(&W)","window.open('http://www.51windows.Net')",0);for (i = 5 ; i < 10; i++ ){
    ContextMenu[i] = new ContextMenuItem("菜单 (&"+i+")","ContextMenu["+i+"].state=(ContextMenu["+i+"].state==0)?1:0",0);
    }function s(){
    if (ContextMenu[2].Text == "选中(&S)"){
    ContextMenu[2].Text = "未选中(&S)";
    ContextMenu[2].state = 0;
    }
    else{
    ContextMenu[2].Text = "选中(&S)";
    ContextMenu[2].state = 1;
    }
    }function go(n){
    ContextMenu[0].state = (n==1)?2:0;
    ContextMenu[1].state = (n==1)?0:2;
    }function showContextMenu(iMenu){
    var i ;
    var menuStrings = new Array();
    var menuStates  = new Array();
    for ( i = 0 ; i < ContextMenu.length ; i++ ){
    menuStrings[i] = ContextMenu[i].Text ;
    menuStates[i] = ContextMenu[i].state ;
    }
    objContent.SetContextMenu(menuStrings, menuStates);
    }
    function MoveObj(){
    objContent.style.top = window.event.y-2
    objContent.style.left = window.event.x-2
    }
    //-->
    </SCRIPT>
    <script language="javascript" event="ShowContextMenu" for="objContent">
    <!--
    showContextMenu(ContextMenu) ;
    //-->
    </script><script language="javascript" event="ContextMenuAction(itemIndex)" for="objContent">
    <!--
    eval(ContextMenu[itemIndex].Command);
    //-->
    </script>
    </body>
    </html>