当前页面: 开发资料首页 → Javascript 专题 → 自定义右键菜单代码详解（二）

自定义右键菜单代码详解（二）

摘要: 自定义右键菜单代码详解（二）

function hidemenuie5() {
//隐藏菜单
//很简单，设置visibility为hidden就OK！
ie5menu.style.visibility = hidden;
}
function highlightie5() {
//高亮度鼠标经过的菜单条项目
//如果鼠标经过的对象是menuitems，就重新设置背景色与前景色
//event.srcElement.className表示事件来自对象的名称，必须首先判断这个值，这很重要！
if (event.srcElement.className == menuitems) {
event.srcElement.style.backgroundColor = highlight;
event.srcElement.style.color = white;
//将链接信息显示到状态行
//event.srcElement.url表示事件来自对象表示的链接URL
if (display_url)
window.status = event.srcElement.url;
   }
}
function lowlightie5() {
//恢复菜单条项目的正常显示
if (event.srcElement.className == menuitems) {
event.srcElement.style.backgroundColor = ;
event.srcElement.style.color = black;
window.status = ;
   }
}

function jumptoie5() {
//转到新的链接位置
if (event.srcElement.className == menuitems) {
//如果存在打开链接的目标窗口，就在那个窗口中打开链接
if (event.srcElement.getAttribute(target) != null)
window.open(event.srcElement.url, event.srcElement.getAttribute(target));
else
//否则，在当前窗口打开链接
window.location = event.srcElement.url;
   }
}
//  End -- >
<  /script >
<  /HEAD >
<  BODY >
<  center ><  h3 >在空白处点击鼠标右键，猜猜会看到什么 ？<  /h3 ><  /center ><  br ><  br >
//定义菜单方框层ie5ment，并定义其显示样式以及相关的3个监测事件
<  div id=ie5menu class=skin0 onMouseover=highlightie5() 
   onMouseout=lowlightie5() onClick=jumptoie5(); >

//定义其中的菜单条项目
//根据你的需要，在这里添加其他的菜单条名称以及相应的链接URL
<  div class=menuitems url=javascript:history.back(); >后退<  /div >
<  div class=menuitems url=javascript:history.forward(); >前进<  /div >
<  hr >
<  div class=menuitems url=http://www.chinabyte.com/builder/ >ChinaByte网络学院<  /div >
<  div class=menuitems url=http://www.chinabyte.com/column/ >ChinaByte专栏天地<  /div >
<  /div >
//页面加载后，首先执行的初始化脚本程序
<  script language=JavaScript1.2 >
//如果当前浏览器是Internet Explorer，document.all就返回真
if (document.all && window.print) {

//选择菜单方块的显示样式
ie5menu.className = menuskin;

//重定向鼠标右键事件的处理过程为自定义程序showmenuie5
document.oncontextmenu = showmenuie5;

//重定向鼠标左键事件的处理过程为自定义程序hidemenuie5
document.body.onclick = hidemenuie5;
}
<  /script >
< /body>< /html>

　　 演示效果

　　 OK！看了上面代码的详细解读，你是否领会了其中的技巧？软件真是无所不能，是吗？

　　 想要看看到底是怎样的神奇效果吗？不要犹豫，请点击这里！