非常简单的右键弹出菜单（原创）

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 2 "http://www.w3.org/TR/html4/loose.dtd">
 3 <html xmlns="http://www.w3.org/1999/xhtml">
 4     <head>
 5         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 6         <title>测试DOM结点操作</title>
 7         <style type="text/css">
 8             .menubox_active {
 9                 background-color: #ccc;
10                 border: 1px solid #ddd;
11                 margin: 0px;
12                 padding: 0px;
13                 width: 200px;
14                 font-weight: bold;
15                 font-size: larger;
16                 list-style: none;
17             }
18             .menubox_active li {
19                 padding-left: 10px;
20                 line-height: 25px;
21             }
22             .menubox_active li:hover {
23                 background-color: #c0c0FF
24             }
25             a:link {
26                 color: #000;
27             }
28             a:visited {
29                 color: blue;
30             }
31             a:hover {
32                 color: #FF7400;
33             }
34             a:active {
35                 color: #F7A300;
36             }
37         </style>
38         <script type="text/javascript">
39             window.onload = function() {
40                 var ull = document.getElementById("ull");
41                 ull.style.display = "none";
42 
43                 //设置右键菜单可见，并根据鼠标点击位置出现
44                 document.getElementById('div1').oncontextmenu = function(event) {
45                     event = window.event ? window.event : event;
46                     ull.className = "menubox_active";
47                     ull.style.display = "block"
48                     ull.style.position = "absolute";
49                     ull.style.left = (event.clientX ? event.clientX : event.X) + "px";
50                     ull.style.top = (event.clientY ? event.clientY : event.Y)+ "px";
51                     return false;
52                 };
53                 //取消鼠标右键弹出菜单的可见性
54                 document.onmousedown = function() {
55                     ull.style.display = "none"
56                 };
57             }
58         </script>
59     </head>
60     <body>
61         <h1>测试DOM结点操作</h1>
62         <div id="div1"  style="width: 200px; height: 200px; border: solid 1px blue"></div>
63         <ul id="ull" class="menubox">
64             <li>
65                 <a href="http://baidu.com">baidu</a>
66             </li>
67             <li>
68                 <a href="#">#####</a>
69             </li>
70         </ul>
71     </body>
72 </html>
posted on 2012-06-15 11:34 gaojun 阅读(618) 评论(0) 编辑收藏举报
刷新页面返回顶部
学习笔记。。。积累！！

公告
