JavaScript自定义右键菜单

<!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: 0px;
padding: 0px;
}
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: #FFFFFF;
}
#menu li{
position: relative;
height: 24px;
padding-left: 24px;
background: #EAEAD7;
vertical-align: top;
}
#menu li a{
display: block;
color: #333333;
background: #FFFFFF;
padding-left: 5px;
text-decoration: none;
}
#menu li.active{
background: #999999;
}
#menu li.active a{
color: #FFFFFF;
background: #8F8F8F;
}
#menu li em{
position: absolute;
top: 0px;
left: 0px;
width: 24px;
height: 24px;
background: url(http://www.codefans.net/jscss/demoimg/201206/ico.png) no-repeat;
}
#menu li em.cur{
background-position: 0px 0px;
}
#menu li em.copy{
background-position: 0px -24px;
}
#menu li em.paste{
background-position: 0px -48px;
}
</style>

window.onload = function () {
var oMenu = document.getElementById("menu");
var aLi = oMenu.getElementsByTagName("li");

//加载后隐藏自定义右键菜单
oMenu.style.display = "none";

//菜单鼠标移入/移出样式
for (var 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>

来源:http://www.bug315.com/article/283.htm

巴特西

JavaScript自定义右键菜单

最新文章

热门文章