ホームページ > 記事 > ウェブフロントエンド > JS_javascript スキルに実装されたカスタム右クリック メニューの 2 つの例
JS_javascript スキルに実装されたカスタム右クリック メニューの 2 つの例
- WBOYオリジナル
- 2016-05-16 15:41:111053ブラウズ
この記事の例では、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 コードは次のとおりです:
コードをコピー コードは次のとおりです:
var _LT_ajax_proxyXmlUrl="http://srvfree.api.51ditu.com/apisrv/p4x?";function LTNS(){LTNS.info={time:'Thu Jul 19 10:00:08 UTC 0800 2012',version: '1',ov:'1.3 Ver 20070705'};var w=function(uq){var iq=0,oq=0;var pq=uq.length;var aq=new String();var sq=-1 ;var dq=0;for(var fq=0;fq
示例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程序设计有所帮助。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。