自定义右键菜单代码详解

< style >
< !--
/*定义菜单方框的样式1*/
.skin0 {
position:absolute;
text-align:left;
width:200px; /*宽度，可以根据实际的菜单项目名称的长度进行适当地调整*/
border:2px solid black;
background-color:menu; /*菜单的背景颜色方案，这里选择了系统默认的菜单颜色*/
font-family:Verdana;
line-height:20px;
cursor:default;
visibility:hidden; /*初始时，设置为不可见*/
}
/*定义菜单方框的样式2*/
.skin1 {
cursor:default;
font:menutext;
position:absolute;
text-align:left;
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
width:200px; /*宽度，可以根据实际的菜单项目名称的长度进行适当地调整*/
background-color:menu; /*菜单的背景颜色方案，这里选择了系统默认的菜单颜色*/
border:1 solid buttonface;
visibility:hidden; /*初始时，设置为不可见*/
border:2 outset buttonhighlight;
}

/*定义菜单条的显示样式*/
.menuitems {
padding-left:15px; /*左间距*/
padding-right:10px; /*右间距*/
}
-- >
< /style >

< SCRIPT LANGUAGE="JavaScript1.2" >

< !--
//定义菜单显示的外观，可以从上面定义的2种格式中选择其一
var menuskin = "skin1";
//是否在浏览器窗口的状态行中显示菜单项目条对应的链接字符串
var display_url = 0;

<b>function showmenuie5() {</b>
//显示菜单

//获取当前鼠标右键按下后的位置，据此定义菜单显示的位置
var rightedge = document.body.clientWidth-event.clientX;
var bottomedge = document.body.clientHeight-event.clientY;

//如果从鼠标位置到窗口右边的空间小于菜单的宽度，就定位菜单的左坐标（Left）
为当前鼠标位置向左一个菜单宽度
if (rightedge < ie5menu.offsetWidth)
ie5menu.style.left = document.body.scrollLeft + event.clientX - ie5menu.offsetWidth;
else
//否则，就定位菜单的左坐标为当前鼠标位置
ie5menu.style.left = document.body.scrollLeft + event.clientX;

//如果从鼠标位置到窗口下边的空间小于菜单的高度，就定位菜单的上坐标（Top）
为当前鼠标位置向上一个菜单高度
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;
}</pre>
<p><pre >
<b>function hidemenuie5() </b>{
//隐藏菜单
//很简单，设置visibility为hidden就OK！
ie5menu.style.visibility = "hidden";
}
<b>function highlightie5() </b>{
//高亮度鼠标经过的菜单条项目
//如果鼠标经过的对象是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;
}
}
<b>function lowlightie5() </b>{
//恢复菜单条项目的正常显示
if (event.srcElement.className == "menuitems") {
event.srcElement.style.backgroundColor = "";
event.srcElement.style.color = "black";
window.status = "";
}
}

<b>function jumptoie5() </b>{
//转到新的链接位置
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

 如果您对本文有任何疑问或者建议，请到讨论区发表您的意见: >> 论坛入口 <<

上一页12 下一页

上一篇： 怎么样在网页中变化图象(速度无延迟)   下一篇： 用JavaScript判断日期、数字、整数和特殊字符

【文章评论】 【收藏本文】 【推荐好友】 【打印本文】 【我要投稿】 【论坛讨论】