送大家一个好东西。。文章发表了。。我公布代码！！

作者： unknow

<HTML>
<HEAD>
<TITLE>使用JavaScript和CSS制作仿Office XP风格的网页右键菜单</TITLE>
<STYLE>
.flyoutLink {
CURSOR: none; FONT-FAMILY: "Verdana", "Arial", "Helvetica"; FONT-SIZE: 14px; PADDING-LEFT: 5px; PADDING-RIGHT: 25px; PADDING-TOP: 1px
}
.skin0 {
BORDER-RIGHT: 1px solid; BORDER-TOP: 1px solid; VISIBILITY: hidden; BORDER-LEFT: 1px solid; WIDTH: 110px; CURSOR: default; LINE-HEIGHT: 20px; BORDER-BOTTOM: 1px solid; FONT-FAMILY: Verdana; POSITION: absolute; BACKGROUND-COLOR: white
}
.skin1 {
BORDER-RIGHT: buttonhighlight 2px outset; BORDER-TOP: buttonhighlight 2px outset; VISIBILITY: hidden; BORDER-LEFT: buttonhighlight 2px outset; WIDTH: 90px; CURSOR: default; BORDER-BOTTOM: buttonhighlight 2px outset; POSITION: absolute; BACKGROUND-COLOR: white
}
</STYLE>
</HEAD>
<SCRIPT LANGUAGE=JavaScript>

//用于模仿Office XP的风格
function MouseOver(src,BackColor)
{
       if (!src.contains(event.fromElement))
        {
            src.bgColor = BackColor;
            src.style.bordercolor = "#000000";
        }
}
function MouseOut(src, BackColor)
{
        if (!src.contains(event.toElement))
        {
            src.bgColor = BackColor;
            src.style.bordercolor = "#000000";
        }
}
function BcMouseOver(src)
{
       if (!src.contains(event.fromElement))
        {
            src.border = 1;
            src.style.bgColor = "#B6BDD2"
        }
}
function BcMouseOut(src)
{
        if (!src.contains(event.toElement))
        {
            src.border = 0;
            src.style.bgColor = "#f1f1f1"
        }
}

//弹出消息
function MM_goToURL() { //v3.0
  var i, args=MM_goToURL.arguments; document.MM_returnValue = false;
  for (i=0; i<(args.length-1); i+=2) eval(args[i]+".location=@#"+args[i+1]+"@#");
}

function MM_popupMsg(msg) { //v1.0
  alert(msg);
}
</script>
<div id=ie5menu style="backgroundColor=white">

  <table width="150" border="0" bgcolor="#f1f1f1" bordercolor="#000000" cellpadding="0" cellspacing="0">
    <tr bordercolor="#f1f1f1">
        <td>
    <table width="100%" border="0" cellpadding="0" cellspacing="0" align="center" onMouseOut="BcMouseOut(this);" onMouseOver="BcMouseOver(this);" bordercolor="#000000" bgcolor="#f1f1f1" bordercolorlight="#000000" bordercolordark="#000000">
          <tr bgcolor="#f1f1f1" bordercolor="#B6BDD2" onMouseOut="MouseOut(this,@##f1f1f1@#);" onMouseOver="MouseOver(this,@##B6BDD2@#);" onClick="location.reload()">
            <td width="26"><img border="0" src="refurbish.gif" width="24"></td>
            <td class=flyoutLink>刷新</td>
          </tr>
    </table>
    </td>
      </tr>
      <tr bordercolor="#f1f1f1">
        <td>
    <table width="100%" border="0" cellpadding="0" cellspacing="0" align="center" onMouseOut="BcMouseOut(this);" onMouseOver="BcMouseOver(this);" bordercolor="#000000" bgcolor="#f1f1f1" bordercolorlight="#000000" bordercolordark="#000000">
          <tr bgcolor="#f1f1f1" bordercolor="#B6BDD2" onMouseOut="MouseOut(this,@##f1f1f1@#);" onMouseOver="MouseOver(this,@##B6BDD2@#);" onClick="window.close()">
                <td width="26"><img border="0" src="close.gif" width="24"></td>
        <td class=flyoutLink>关闭窗口</td>
          </tr>
    </table>
    </td>
      </tr>
      <tr bordercolor="#f1f1f1">
        <td>
    <table width="100%" border="0" cellpadding="0" cellspacing="0" align="center" onMouseOut="BcMouseOut(this);" onMouseOver="BcMouseOver(this);" bordercolor="#000000" bgcolor="#f1f1f1" bordercolorlight="#000000" bordercolordark="#000000">
          <tr bgcolor="#f1f1f1" bordercolor="#B6BDD2" onMouseOut="MouseOut(this,@##f1f1f1@#);" onMouseOver="MouseOver(this,@##B6BDD2@#);" onClick="history.go(-1)">
        <td width="26"><img border="0" src="back.gif" width="24"></td>
            <td class=flyoutLink>后退</td>
          </tr>
    </table>
    </td>
      </tr>
      <tr bordercolor="#f1f1f1">
        <td>
    <table width="100%" border="0" cellpadding="0" cellspacing="0" align="center" onMouseOut="BcMouseOut(this);" onMouseOver="BcMouseOver(this);" bordercolor="#000000" bgcolor="#f1f1f1" bordercolorlight="#000000" bordercolordark="#000000">
          <tr bgcolor="#f1f1f1" bordercolor="#B6BDD2" onMouseOut="MouseOut(this,@##f1f1f1@#);" onMouseOver="MouseOver(this,@##B6BDD2@#);" onClick="history.go(1)">
        <td width="26"><img border="0" src="forward.gif" width="24"></td>
            <td class=flyoutLink>前进</td>
          </tr>
    </table>
    </td>
      </tr>
      <tr bordercolor="#f1f1f1">
        <td>
    <table width="100%" border="0" cellpadding="0" cellspacing="0" align="center" onMouseOut="BcMouseOut(this);" onMouseOver="BcMouseOver(this);" bordercolor="#000000" bgcolor="#f1f1f1" bordercolorlight="#000000" bordercolordark="#000000">
          <tr bgcolor="#f1f1f1" bordercolor="#B6BDD2" onMouseOut="MouseOut(this,@##f1f1f1@#);" onMouseOver="MouseOver(this,@##B6BDD2@#);" onClick="MM_popupMsg(@#欢迎使用仿Office XP风格的网页右键菜单程序\r欢迎大家给我来信\reaststarbuy@sina.com@#)">
        <td width="26"><img border="0" src="about.gif" width="24"></td>
            <td class=flyoutLink>关于本菜单</td>
          </tr>
    </table>
    </td>
      </tr>
    </table>
</div>
<SCRIPT type=text/JavaScript>
//检测浏览器
ie = (document.all)? true:false
if (ie){
function ctlent(eventobject){if(event.ctrlKey && window.event.keyCode==13){this.document.FORM.submit();}}
}

clckcnt = 0;

var nn = !!document.layers;
var ie = !!document.all;

if (nn) {
  netscape.security.PrivilegeManager.enablePrivilege("UniversalSystemClipboardAccess");
  var fr=new java.awt.Frame();
  var Zwischenablage = fr.getToolkit().getSystemClipboard();
}

var menuskin=0

var display_url=0

//显示右键菜单
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){
if (menuskin==0)
ie5menu.className="skin0"
else
ie5menu.className="skin1"
document.oncontextmenu=showmenuie5
document.body.onclick=hidemenuie5
}
</SCRIPT>
<Body>
<P>欢迎使用本菜单，欢迎大家给我来信。</P>
</Body>
</HTML>

注意：使用的时候把图片改掉就可以了。。
效果不是怎么好。图片的效果没有做出来。。。

返回顶部

下一篇：用javascirpt在<TEXTAREA>中插入元素（光标位置）,大家看看！ >>