鼠标位置显示的有关问题，做成这样的，在页面的位置显示一个下拉单，这个鼠标的位置如果在下面就在上面显示这个单子，如屏幕的最左面单子就在
日期：2014-05-16 浏览次数：20374 次
鼠标位置显示的问题，做成这样的，在页面的位置显示一个下拉单，这个鼠标的位置如果在下面就在上面显示这个单子，如屏幕的最左面单子就在
具体这样的，那windows来说，
1：在屏幕的最下方鼠标右键，右键菜单在上面显示，
2：在屏幕的最上方鼠标右键，右键菜单在下面显示，
3：在屏幕的最左方鼠标右键，右键菜单在右面显示，
实现这样的一个效果，代码该怎么写啊，请大家指点
------解决方案--------------------
通过判断事件触发时的鼠标位置来控制，分三种情况：
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>
具体这样的，那windows来说，
1：在屏幕的最下方鼠标右键，右键菜单在上面显示，
2：在屏幕的最上方鼠标右键，右键菜单在下面显示，
3：在屏幕的最左方鼠标右键，右键菜单在右面显示，
实现这样的一个效果，代码该怎么写啊，请大家指点
------解决方案--------------------
通过判断事件触发时的鼠标位置来控制，分三种情况：
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>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
