鼠标位置显示的问题，做成这样的，在页面的位置显示一个下拉单，这个鼠标的位置如果在下面就在上面显示这个单子，如屏幕的最左面单子就在

通过判断事件触发时的鼠标位置来控制，分三种情况：1、鼠标点击位置在右下角时（区域面积为右键菜单的宽和高），菜单的左上角坐标为：（窗口宽度减去菜单宽度，窗口高度减去菜单高度）2、鼠标点在窗口右侧时，菜单的左上角坐标为：（窗口宽度减去菜单宽度，鼠标Y轴位置）3、鼠标点在窗口底部时，菜单的左上角坐标为：（鼠标X轴位置，窗口高度减去菜单高度）4、点在其它区域时，菜单的左上角坐标为：（鼠标X轴位置，鼠标Y轴位置）下面是个小例子：<HTML>
<SCRIPT LANGUAGE="JScript">
//参数：posX-事件触发时的鼠标在IE工作区中的X坐标
//     posY-事件触发时的鼠标在IE工作区中的Y坐标
//     bodyW-事件触发时IE工作区的宽度
//     bodyH-事件触发时IE工作区的高度
//     menuW-自定义菜单的宽度
//     menuH-自定义菜单的高度function showMenu(posX,posY,bodyW,bodyH,menuW,menuH){
  var obj=document.getElementById('menu');
  if(posX>=(bodyW-menuW) && posY>=(bodyH-menuH)){//当鼠标点在窗口右下角时
    obj.style.left=posX-menuW;//菜单左上角X轴坐标为：鼠标位置X轴坐标-菜单宽度
    obj.style.top=posY-menuH;//菜单左上角Y轴坐标为：鼠标位置Y轴坐标-菜单高度
  }
  else if(posX>=(bodyW-menuW)){//当鼠标点在窗口右侧时
    obj.style.left=posX-menuW;
obj.style.top=posY;
  }
  else if(posY>=(bodyH-menuH)){//当鼠标点在窗口下侧时
    obj.style.left=posX;
    obj.style.top=posY-menuH;
  }
  else{//当鼠标点在窗口其他位置时
    obj.style.left=posX;
    obj.style.top=posY;
  }
  obj.style.visibility='visible';
}
</SCRIPT>
<BODY onload="document.oncontextmenu=function(){return false;}" 
oncontextmenu="showMenu(event.offsetX,event.offsetY,document.body.clientWidth,document.body.offsetHeight,100,100)">
<div id="menu" style="position:absolute; visibility:hidden; width:100px; height:100px; background:black;">
<table width="100%" border="0" cellspacing="1" bgcolor="green">
  <tr bgcolor="white"><td><a href="#">菜单项一</a></td></tr>
  <tr bgcolor="white"><td><a href="#">菜单项一</a></td></tr>
  <tr bgcolor="white"><td><a href="#">菜单项一</a></td></tr>
  <tr bgcolor="white"><td><a href="#">菜单项一</a></td></tr>
</table>
</div>
</BODY>
</HTML>

解决方案 »

  1.   

    <body>
    <script language="javascript">
    //显示菜单
    function setDivDisplay(divName,posX,posY) {
        var obj = document.getElementById(divName);
        var e = window.event;
    var menuW=100,menuH=100;
    var bodyW=e.clientX; 
    var bodyH=e.clientY;  
        if ( obj.style.left === "" ){
            obj.style.left = (e.clientX - 50) + "px";
        }    
        if (obj.style.top === "") {
            obj.style.top = (e.clientY + 1) + "px";
        }    
        /*
        if(posX>=(bodyW-menuW) && posY>=(bodyH-menuH)){//当鼠标点在窗口右下角时
        obj.style.left=posX-menuW;//菜单左上角X轴坐标为：鼠标位置X轴坐标-菜单宽度
        obj.style.top=posY-menuH;//菜单左上角Y轴坐标为：鼠标位置Y轴坐标-菜单高度
      }
      else if(posX>=(bodyW-menuW)){//当鼠标点在窗口右侧时
        obj.style.left=posX-menuW;
    obj.style.top=posY;
      }
      else if(posY>=(bodyH-menuH)){//当鼠标点在窗口下侧时
        obj.style.left=posX;
        obj.style.top=posY-menuH;
      }
      else{//当鼠标点在窗口其他位置时
        obj.style.left=posX;
        obj.style.top=posY;
      }*/
    //  alert(obj);
       obj.style.visibility="visible";  
    }
    function setDivHide(divName) {
        var v = document.getElementById(divName);
        v.style.visibility = "hidden";
    }
    </script>
    <TABLE width="102%" align="center" border="0" cellpadding="0" cellspacing="0">
            <TR >
                <TD>
                    <TABLE border="0" cellpadding="0" cellspacing="1">
                        <TR align="left" >                    
                       <TD onmouseover="setDivDisplay('gztfg1',event.offsetX,event.offsetY)" onmouseout="setDivHide('gztfg1')" > 
                工<strong>作台风格</strong><img src="../images/toolzoomin.gif" width="23" height="23" border="0">| 
              </TD>
                        </TR>
                    </TABLE>
                </TD>
            </TR>
          </TABLE>
     <DIV id="gztfg1" onmouseover="setDivDisplay('gztfg1',event.offsetX,event.offsetY)" onmouseout="setDivHide('gztfg1')" style="position:absolute;visibility:hidden;">
            <TABLE border="0" cellpadding="0" cellspacing="1" >
                <TR>
                    <TD width="4" ></TD>
                    <TD height="20">非查</TD>
                </TR>
               </TABLE>
        </DIV>   
    </body>
    </html>
      

  2.   

    <HTML>
    <SCRIPT LANGUAGE="JScript">
    //参数：posX-事件触发时的鼠标相对于触发事件对象的X坐标
    //     posY-事件触发时的鼠标相对于触发事件对象的Y坐标
    //     divName-层的id
    //     msg-要写进层里的内容，本例中从<a>...</a>对象的自定义属性tip的值获取function setDivDisplay(divName,posX,posY,msg){
      var obj = document.getElementById(divName);
      obj.innerText=msg;//指定层的内容
      obj.style.left=posX+10;//指定层显示时其左上角的横向坐标（事件触发时的坐标偏移10）
      obj.style.top=posY+10;//指定层显示时其左上角的纵向坐标（事件触发时的坐标偏移10）
      obj.style.visibility='visible';
    }function setDivHide(divName) {
        var obj = document.getElementById(divName);
        obj.style.visibility = "hidden";
    }</SCRIPT>
    <BODY>
    <div id="div1" style="position:absolute; visibility:hidden; width:100px; border:1px green solid; font-size:12px; padding:3px; color:green; background:#EEEEEE;"></div><a href="#" tip="把鼠标移动到指定位置显示指定层的示例" onMouseOver="setDivDisplay('div1',event.offsetX,event.offsetY,this.tip)" onMouseOut="setDivHide('div1')">例11111</a><br><br><a href="#" tip="另外一个例子" onMouseOver="setDivDisplay('div1',event.offsetX,event.offsetY,this.tip)" onMouseOut="setDivHide('div1')">例222222222222</a><br><br>
    </BODY>
    </HTML>