可参考我这个sample:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title> <script type="text/javascript">
function HideMenu(e)
{
//alert('a');
if(e.srcElement&&e.srcElement.parentNode.tagName.toLowerCase()=='li') return ;//ie
if(e.target&&e.target.parentNode.tagName.toLowerCase()=='li') return;//ffmenu.style.display="none";
}
function contextmenu(e)
{
menu.style.display="block";
menu.style.left=e.clientX+'px';
menu.style.top=e.clientY+'px';
}var menu;
function loadmenu()
{
menu=document.getElementById("divMenu");
}
</script></head>
<body onload="loadmenu()" oncontextmenu="contextmenu(event);return false;" onclick="HideMenu(event);">
<div>
<pre>
click here
click here
click here
click here
click here
click here
click here
click here
click here </pre>
</div>
<div id="divMenu" style="filter: Alpha(opacity=80); opacity: 0.8; display: none;
position: absolute; z-index: 999; top: 60px; left: 248px; border: none;">
<table style="background-color: ButtonFace; border: none; width: 80px;">
<tr>
<td style="cursor: pointer;" onmouseover="this.style.backgroundColor='blue'" onmouseout="this.style.backgroundColor='ButtonFace'">
add
</td>
</tr>
<tr>
<td style="cursor: pointer;" onmouseover="this.style.backgroundColor='blue'" onmouseout="this.style.backgroundColor='ButtonFace'">
update
</td>
</tr>
<tr>
<td style="cursor: pointer;" onmouseover="this.style.backgroundColor='blue'" onmouseout="this.style.backgroundColor='ButtonFace'">
copy
</td>
</tr>
<tr>
<td style="cursor: pointer;" onmouseover="this.style.backgroundColor='blue'" onmouseout="this.style.backgroundColor='ButtonFace'">
paste
</td>
</tr>
</table>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Page</title> <script type="text/javascript">
function HideMenu(e)
{
//alert('a');
if(e.srcElement&&e.srcElement.parentNode.tagName.toLowerCase()=='li') return ;//ie
if(e.target&&e.target.parentNode.tagName.toLowerCase()=='li') return;//ffmenu.style.display="none";
}
function contextmenu(e)
{
menu.style.display="block";
menu.style.left=e.clientX+'px';
menu.style.top=e.clientY+'px';
}var menu;
function loadmenu()
{
menu=document.getElementById("divMenu");
}
</script></head>
<body onload="loadmenu()" oncontextmenu="contextmenu(event);return false;" onclick="HideMenu(event);">
<div>
<pre>
click here
click here
click here
click here
click here
click here
click here
click here
click here </pre>
</div>
<div id="divMenu" style="filter: Alpha(opacity=80); opacity: 0.8; display: none;
position: absolute; z-index: 999; top: 60px; left: 248px; border: none;">
<table style="background-color: ButtonFace; border: none; width: 80px;">
<tr>
<td style="cursor: pointer;" onmouseover="this.style.backgroundColor='blue'" onmouseout="this.style.backgroundColor='ButtonFace'">
add
</td>
</tr>
<tr>
<td style="cursor: pointer;" onmouseover="this.style.backgroundColor='blue'" onmouseout="this.style.backgroundColor='ButtonFace'">
update
</td>
</tr>
<tr>
<td style="cursor: pointer;" onmouseover="this.style.backgroundColor='blue'" onmouseout="this.style.backgroundColor='ButtonFace'">
copy
</td>
</tr>
<tr>
<td style="cursor: pointer;" onmouseover="this.style.backgroundColor='blue'" onmouseout="this.style.backgroundColor='ButtonFace'">
paste
</td>
</tr>
</table>
</div>
</body>
</html>
<HTML><HEAD><TITLE>右键菜单的淡入淡出效果</TITLE>
<META content="text/html; charset=gb2312" http-equiv=Content-Type>
<SCRIPT language=JavaScript>
<!-- // RightClickMenu
var intDelay=1; //设置菜单显示速度,越大越慢
var intInterval=20; //每次更改的透明度
function showmenuie5(){
var rightedge=document.body.clientWidth-event.clientX
var bottomedge=document.body.clientHeight-event.clientY
if (rightedge<ie5menu.offsetWidth)
ie5menu.style.left=document.body.scrollLeft+event.clientX-ie5menu.offsetWidth
else
ie5menu.style.left=document.body.scrollLeft+event.clientX
if (bottomedge<ie5menu.offsetHeight)
ie5menu.style.top=document.body.scrollTop+event.clientY-ie5menu.offsetHeight
else
ie5menu.style.top=document.body.scrollTop+event.clientY
ie5menu.style.visibility="visible"
//ie5menu.style.visibility=""
ie5menu.filters.alpha.opacity=0
GradientShow()
return false
}
function hidemenuie5(){
//ie5menu.style.visibility="hidden"
GradientClose()
}
function highlightie5(){
if (event.srcElement.className=="menuitems"){
event.srcElement.style.backgroundColor="highlight"
event.srcElement.style.color="white"
}
}
function lowlightie5(){
if (event.srcElement.className=="menuitems"){
event.srcElement.style.backgroundColor=""
event.srcElement.style.color="#000000"
}
}
function jumptoie5(){
if (event.srcElement.className=="menuitems"){
if (event.srcElement.url != ''){
if (event.srcElement.getAttribute("target")!=null)
window.open(event.srcElement.url,event.srcElement.getAttribute("target"))
else
window.location=event.srcElement.url
}
}
} function GradientShow() //实现淡入的函数
{
ie5menu.filters.alpha.opacity+=intInterval
if (ie5menu.filters.alpha.opacity<100) setTimeout("GradientShow()",intDelay)
} function GradientClose() //实现淡出的函数
{
ie5menu.filters.alpha.opacity-=intInterval
if (ie5menu.filters.alpha.opacity>0) {
setTimeout("GradientClose()",intDelay)
}
else {
ie5menu.style.visibility="hidden"
}
} function ChangeBG() //改变菜单项的背景颜色,这里的两种颜色值可以改为你需要的
{
oEl=event.srcElement
if (oEl.style.background!="navy") {
oEl.style.background="navy"
}
else {
oEl.style.background="#cccccc"
}
}
// -->
</SCRIPT> <STYLE type=text/css>
.cMenu {
FILTER: alpha(opacity=0);BACKGROUND-COLOR: #D6D3CE;BORDER-BOTTOM: #666666 2px solid; BORDER-LEFT: #E4E4E4 2px solid; BORDER-RIGHT: #666666 2px solid; BORDER-TOP: #E4E4E4 2px solid; COLOR: #000000; CURSOR: default; FONT-SIZE: 9pt; color:#000000;FONT-WEIGHT: normal; LINE-HEIGHT: 20px; POSITION: absolute; VISIBILITY: hidden; WIDTH: 110px
}
.menuitems {
font-size:9pt;
MARGIN: 2px;
PADDING-BOTTOM: 0px;
PADDING-LEFT: 15px;
PADDING-RIGHT: 3px;
PADDING-TOP: 0px;
}
</STYLE> <META content="Microsoft FrontPage 4.0" name=GENERATOR>
</HEAD>
<BODY>
<OBJECT classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 height=0 id=WebBrowser width=0>
</OBJECT>
<RIGHTCLICK><!--[if IE]>
<DIV class=cMenu id=ie5menu onclick=jumptoie5() onmouseout=lowlightie5()
onmouseover=highlightie5()> <DIV class=menuitems url="javascript:click_obj(0)">后退</DIV>
<DIV class=menuitems url="javascript:click_obj(1)">前进</DIV>
<DIV class=menuhr><hr style="width:100%"></DIV>
<DIV class=menuitems url="javascript:click_obj(2)">刷新</DIV>
<DIV class=menuitems url="javascript:click_obj(3)">加入收藏夹</DIV>
<DIV class=menuitems url="javascript:click_obj(4)">查看源文件</DIV>
<DIV class=menuhr><hr style="width:100%"></DIV>
<DIV class=menuitems url="javascript:click_obj(5)">属性</DIV> </DIV>
<![endif]--> <SCRIPT language=JavaScript>
<!--
function click_obj(id){
switch(id){
case 0:
history.back()
break
case 1:
history.forward()
break
case 2:
window.location.reload()
break
case 3:
window.external.AddFavorite(location.href, document.title)
break
case 4:
window.location = "view-source:" + window.location.href
break
case 5:
document.all.WebBrowser.ExecWB(10,2)
break
}
} if (document.all&&window.print){
ie5menu.className="cMenu"
document.oncontextmenu=showmenuie5
document.body.onclick=hidemenuie5
}
//-->
</SCRIPT>
</RIGHTCLICK>
</BODY></HTML>给你个完整版的
但是你的document.body.scrollLeft
里面的body建议都换成documentElement
如果非要显示在右侧可以把这两行去掉这样
<script>
function showmenuie5()
{
var rightedge = document.body.clientWidth-event.clientX;
var bottomedge = document.body.clientHeight-event.clientY;
//if (rightedge < ie5menu.offsetWidth)
//ie5menu.style.left = document.body.scrollLeft + event.clientX -ie5menu.offsetWidth;
//else
ie5menu.style.left = document.body.scrollLeft + event.clientX;
if (bottomedge < ie5menu.offsetHeight)
ie5menu.style.top = document.body.scrollTop + event.clientY - ie5menu.offsetHeight;
else
ie5menu.style.top = document.body.scrollTop + event.clientY;
ie5menu.style.visibility = "visible";
return false;
}
function hidemenuie5()
{
ie5menu.style.visibility = "hidden";
}
if (document.all&&window.print)
{
ie5menu.className = menuskin;
document.oncontextmenu = showmenuie5;
document.body.onclick = hidemenuie5; //隐藏图层
}
</script>