< 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 document.body.onclick = hidemenuie5; } < /script > < /body>< /html> </pre> <P> <b>演示效果</b></p> <P> OK!看了上面代码的详细解读,你是否领会了其中的技巧?软件真是无所不能,是吗?</p> <P> 想要看看到底是怎样的神奇效果吗?不要犹豫,请点击<a href="http://www.chinabyte.com/builder/download/gdemo.htm" target="_blank">这里</a>!</p>
|