知识大全自定义右键菜单代码详解

Posted 2022-07-21 菜单

篇首语：饭可以一日不吃，觉可以一日不睡，书不可以一日不读本文由小常识网(cha138.com)小编为大家整理，主要介绍了知识大全自定义右键菜单代码详解相关的知识，希望对你有一定的参考价值。

< style > < ! /*定义菜单方框的样式 */ skin position:absolute; text align:left; width: px; /*宽度可以根据实际的菜单项目名称的长度进行适当地调整*/ border: px solid black; background color:menu; /*菜单的背景颜色方案这里选择了系统默认的菜单颜色*/ font family:Verdana; line height: px; cursor:default; visibility:hidden; /*初始时设置为不可见*/ /*定义菜单方框的样式 */ skin cursor:default; font:menutext; position:absolute; text align:left; font family: Arial Helvetica sans serif; font size: pt; width: px; /*宽度可以根据实际的菜单项目名称的长度进行适当地调整*/ background color:menu; /*菜单的背景颜色方案这里选择了系统默认的菜单颜色*/ border: solid buttonface; visibility:hidden; /*初始时设置为不可见*/ border: outset buttonhighlight; /*定义菜单条的显示样式*/ 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.lor = "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.lor = "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" onMouseover="highlightie5()" onMouseout="lowlightie5()" onClick="jumptoie5();" > //定义其中的菜单条项目 //根据你的需要，在这里添加其他的菜单条名称以及相应的链接URL < div url="javascript:history.back();" >后退< /div > < div url="javascript:history.forward();" >前进< /div > < hr > < div url="" >ChinaByte网络学院< /div > < div url="" >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>< /> </pre> <P>　　 <b>演示效果</b></p> <P>　　 OK！看了上面代码的详细解读，你是否领会了其中的技巧？软件真是无所不能，是吗？</p> <P>　　想要看看到底是怎样的神奇效果吗？不要犹豫，请点击<a _blank">这里</a>！</p> cha138/Article/program/Java/JSP/201311/19166

知识大全 自定义右键菜单代码详解

知识大全自定义右键菜单代码详解