web 页面右键菜单

来源:互联网 发布:ks线切割编程破解版 编辑:程序博客网 时间:2024/04/29 03:11

 

 <style type="text/css">
.menubox_active {
background-color: #ccc;
border: 1px solid #ddd;
margin: 0px;
padding: 0px;
width: 200px;
font-weight: bold;
font-size: larger;
list-style: none;
}
.menubox_active li {
padding-left: 10px;
line-height: 25px;
}
.menubox_active li:hover {
background-color: #c0c0FF
}
a:link {
color: #000;
}
a:visited {
color: blue;
}
a:hover {
color: #FF7400;
}
a:active {
color: #F7A300;
}
</style>
<script type="text/javascript">
window.onload = function() {
var ull = document.getElementById("ull");
ull.style.display = "none";

//设置右键菜单可见,并根据鼠标点击位置出现
document.getElementById('div1').oncontextmenu = function(event) {
event = window.event ? window.event : event;
ull.className = "menubox_active";
ull.style.display = "block"
ull.style.position = "absolute";
ull.style.left = (event.clientX ? event.clientX : event.X) + "px";
ull.style.top = (event.clientY ? event.clientY : event.Y)+ "px";
return false;
};
//取消鼠标右键弹出菜单的可见性
document.onmousedown = function() {
ull.style.display = "none"
};
}
</script>
</head>
<body>
<h1>测试DOM结点操作</h1>
<div id="div1"  style="width: 200px; height: 200px; border: solid 1px blue"></div>
<ul id="ull" class="menubox">
<li>
<a href="http://baidu.com">baidu</a>
</li>
<li>
<a href="#">#####</a>
</li>
</ul>
</body>

原创粉丝点击