JS实现的自定义右键菜单实例二则

时间:2020-05-14 企鹅人气:0

本文实例讲述了JS实现的自定义右键菜单。分享给大家供大家参考。具体如下：

示例1：

运行效果截图：

具体代码如下：

<!DOCTYPE html>
<html>
 <head>
 <title>JS实现自定义右键菜单</title>
 <meta http-equiv="content-type" content="text/html; charset=utf-8">
 <script src="ajax.js"></script>
 <style type="text/css">
 #container {
  text-align : center;
  width : 500px;
  height : 500px;
  border : 1px solid blue;
  margin : 0 auto;
 }
 .skin {
  width : 100px;
  border : 1px solid gray;
  padding : 2px;
  visibility : hidden;
  position : absolute;
 }
 div.menuitems {
  margin : 1px 0;
 }
 div.menuitems a {
  text-decoration : none;
 }
 div.menuitems:hover {
  background-color : #c0c0c0;
 }
 </style>
<script> 
window.onload = function() {
 var container = document.getElementById('container'); 
 var menu = document.getElementById('menu');
 /*显示菜单*/
 function showMenu() {
 var evt = window.event || arguments[0];
 /*获取当前鼠标右键按下后的位置，据此定义菜单显示的位置*/
 var rightedge = container.clientWidth-evt.clientX;
 var bottomedge = container.clientHeight-evt.clientY;
 /*如果从鼠标位置到容器右边的空间小于菜单的宽度，就定位菜单的左坐标（Left）为当前鼠标位置向左一个菜单宽度*/
 if (rightedge < menu.offsetWidth)  
  menu.style.left = container.scrollLeft + evt.clientX - menu.offsetWidth + "px";  
 else
 /*否则，就定位菜单的左坐标为当前鼠标位置*/
  menu.style.left = container.scrollLeft + evt.clientX + "px";
 /*如果从鼠标位置到容器下边的空间小于菜单的高度，就定位菜单的上坐标（Top）为当前鼠标位置向上一个菜单高度*/
 if (bottomedge < menu.offsetHeight)
  menu.style.top = container.scrollTop + evt.clientY - menu.offsetHeight + "px";
 else
 /*否则，就定位菜单的上坐标为当前鼠标位置*/
  menu.style.top = container.scrollTop + evt.clientY + "px";
 /*设置菜单可见*/
 menu.style.visibility = "visible";  
 LTEvent.addListener(menu,"contextmenu",LTEvent.cancelBubble);
 }
 /*隐藏菜单*/
 function hideMenu() {
 menu.style.visibility = 'hidden';
 }    
 LTEvent.addListener(container,"contextmenu",LTEvent.cancelBubble);
 LTEvent.addListener(container,"contextmenu",showMenu);
 LTEvent.addListener(document,"click",hideMenu);   
}
</script>
 </head>
 <body>
 <div id="menu" class="skin">
 <div class="menuitems">
  <a href="javascript:history.back();">后退</a>
 </div>
 <div class="menuitems">
  <a href="javascript:history.back();">前进</a>
 </div>
 <hr>
 <div class="menuitems">
  <a href="" target="_blank">地图api</a>
 </div>
 <div class="menuitems">
  <a href="" target="_blank">实时交通</a>
 </div>
 <div class="menuitems">
  <a href="" target="_blank">地图搜索</a>
 </div>
 <div class="menuitems">
  <a href="" target="_blank">驾驶导航</a>
 </div>
 <hr>
 <div class="menuitems">
  <a href="" target="_blank">灵图UU</a>
 </div>
 <div class="menuitems">
  <a href="" target="_blank">路书下载</a>
 </div>
 <hr>
 <div class="menuitems">
  <a href="" target="_blank">关于本站</a>
 </div>
 <div class="menuitems">
  <a href="" target="_bland">友情链接</a>
 </div>
 </div>
 <div id="container"> 
 <p>右键此区域</p>
 </div>
 </body>
</html>

其中ajax.js代码如下：

复制代码代码如下:

示例2：

运行效果截图如下：

具体代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>自定义右键菜单</title>
<style type="text/css"> 
body,ul,li{margin:0;padding:0;}
body{font:12px/24px arial;}
#menu{position:absolute;top:-9999px;left:-9999px;width:100px;border-radius:3px;list-style-type:none;border:1px solid #8f8f8f;padding:2px;background:#fff;}
#menu li{position:relative;height:24px;padding-left:24px;background:#eaead7;vertical-align:top;}
#menu li a{display:block;color:#333;background:#fff;padding-left:5px;text-decoration:none;}
#menu li.active{background:#999;}
#menu li.active a{color:#fff;background:#8f8f8f;}
#menu li em{position:absolute;top:0;left:0;width:24px;height:24px;background:url(images/ico.png) no-repeat;}
#menu li em.cur{background-position:0 0;}
#menu li em.copy{background-position:0 -24px;}
#menu li em.paste{background-position:0 -48px;}
</style>
<script type="text/javascript"> 
window.onload = function ()
{
 var oMenu = document.getElementById("menu");
 var aLi = oMenu.getElementsByTagName("li");
 //加载后隐藏自定义右键菜单
 oMenu.style.display = "none";
 //菜单鼠标移入/移出样式
 for (i = 0; i < aLi.length; i++)
 {
 //鼠标移入样式
 aLi[i].onmouseover = function ()
 {
  this.className = "active" 
 };
 //鼠标移出样式
 aLi[i].onmouseout = function ()
 {
  this.className = "" 
 }
 }
 //自定义菜单
 document.oncontextmenu = function (event)
 {
 var event = event || window.event;
 var style = oMenu.style;
 style.display = "block";
 style.top = event.clientY + "px";
 style.left = event.clientX + "px";
 return false;
 };
 //页面点击后自定义菜单消失
 document.onclick = function ()
 {
 oMenu.style.display = "none" 
 }
};
</script>
</head>
<body>
<center>自定义右键菜单，请在页面点击右键查看效果。</center>
<ul id="menu">
 <li><em class="cut"></em><a href="javascript:;">剪切</a></li>
 <li><em class="copy"></em><a href="javascript:;">复制</a></li>
 <li><em class="paste"></em><a href="javascript:;">粘贴</a></li>
</ul>
</body>
</html>

完整实例代码点击此处本站下载。

希望本文所述对大家的javascript程序设计有所帮助。

加载全部内容