下面是简单的写了下。复杂的话请联系我.282215036
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>右键菜单功能</title>
<style>
.menu {
z-index:990;
border-right: black 2px outset;
border-top: black 1px outset;
visibility: hidden;
background:#EEE;
border-left: black 1px solid;
width: 170px;
cursor: hand;
line-height: 20px;
padding-top: 2px;
border-bottom: black 2px solid;
position: absolute;
text-align: left;
font-size: 12px;
margin: 10px 0px 0px;
font-family: "宋体";
}
.menuitems {
padding-right: 1px;
padding-left: 10px;
padding-bottom: 2px;
padding-top: 2px;
}
</style>
<script>
function highlightie(evt, classItems) {
var event = evt || window.event;
var element = event.srcElement || event.target;
if (element.className == classItems) {
element.style.backgroundColor = "#336699";
element.style.outlineColor = "red";
element.style.color = "white";
}
}
function lowlightie(evt, classItems) {
var event = evt || window.event;
var element = event.srcElement || event.target;
if (element.className == classItems) {
element.style.backgroundColor = "";
element.style.color = "black";
}
}
var menuskin = "menu";
function showMenu() {
var dbcw = document.body.clientWidth, dbch = document.body.clientHeight;
var dbsl = document.body.scrollLeft, dbst = document.body.scrollTop;
var event=getEvent();
var rightedge = dbcw-event.clientX;
var bottomedge = dbch-event.clientY;
main_menu.style.display = "";
if (rightedge < main_menu.offsetWidth) {
main_menu.style.left = (dbcw >= main_menu.offsetWidth) ? (dbcw - main_menu.offsetWidth) : 0;
} else {
main_menu.style.left = dbsl + event.clientX;
}
if (bottomedge < main_menu.offsetHeight) {
main_menu.style.top = (dbch >= main_menu.offsetHeight) ? (dbch - main_menu.offsetHeight) : 0;
} else {
main_menu.style.top = dbst + event.clientY;
}
main_menu.style.visibility = "visible";
event.returnValue = false;
return false;
}
function getEvent() {
if (document.all) {
return window.event;
}
func=getEvent.caller;
while(func != null) {
var arg0=func.arguments[0];
if(arg0) {
if((arg0.constructor==Event || arg0.constructor ==MouseEvent)
|| (typeof(arg0)=="object" && arg0.preventDefault && arg0.stopPropagation)) {
return arg0;
}
}
func=func.caller;
}
return null;
}
function hideAllMenu() {
main_menu.style.display = "none";
}
function $(id){
return document.getElementById(id);
}
function add() {
alert("小样，成功了!");
}
</script>
</head>
<body>
<div class="menu" id="main_menu" onmouseover="highlightie(event, 'menuitems');" onmouseout="lowlightie(event, 'menuitems');">
<div class="menuitems" onclick="add()"> 添加(点一下)</div>
<div class="menuitems"> 删除</div>
<hr />
<div class="menuitems"> 上移</div>
<div class="menuitems"> 下移</div>
</div>
<table width="2200" oncontextmenu="showMenu()";>
<tr>
<td width="180px"><input type="button" value="my name is xi pei" style="width:180px;"></td>
</tr>
</table>
</body>
<script>
var main_menu = $("main_menu");
main_menu.className = menuskin;
document.body.onclick = hideAllMenu;
</script>
</html>
