html中实现某区域内右键自定义菜单

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!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>
    <title></title>
    <meta charset="GBK">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <style type="text/css">
        #drawing
        {
            text-align: center;
            width: 500px;
            height: 500px;
            border: 1px solid blue;
            margin: 0 auto;
            overflow: auto;
            display: block;
        }
        body, div, ul, li
        {
            margin: 0;
            padding: 0;
        }
         
        body
        {
            font: 12px/1.5 \5fae\8f6f\96c5\9ed1;
        }
         
        ul
        {
            list-style-type: none;
        }
         
        #menu ul
        {
            position: absolute;
            float: left;
            border: 1px solid #979797;
            background: #f1f1f1;
            padding: 2px;
            box-shadow: 2px 2px 2px rgba(0, 0, 0, .6);
            width: 230px;
            overflow: hidden;
        }
         
        #menu ul li
        {
            float: left;
            clear: both;
            height: 24px;
            cursor: pointer;
            line-height: 24px;
            white-space: nowrap;
            padding: 0 30px;
            width: 100%;
            display: inline-block;
        }
         
        #menu ul li:hover
        {
            background: #E6EDF6;
            border: 1px solid #B4D2F6;
        }
         
        .skin
        {
            width: 100px;
            padding: 2px;
            visibility: hidden;
            position: absolute;
        }
    </style>
    <script type="text/javascript" src="http://api.51ditu.com/js/ajax.js"></script>
    <script type="text/javascript">
        //-->右键自定义菜单
        window.onload = function () {
            var drawing = document.getElementById('drawing');
            var menu = document.getElementById('menu');
 
            /*显示菜单*/
            function showMenu() {
 
                var evt = window.event || arguments[0];
 
                /*获取当前鼠标右键按下后的位置,据此定义菜单显示的位置*/
                var rightedge = drawing.clientWidth - evt.clientX;
                var bottomedge = drawing.clientHeight - evt.clientY;
                /*如果从鼠标位置到容器右边的空间小于菜单的宽度,就定位菜单的左坐标(Left)为当前鼠标位置向左一个菜单宽度*/
                if (rightedge < menu.offsetWidth)
                    menu.style.left = drawing.scrollLeft + evt.clientX - menu.offsetWidth + "px";
                else
                /*否则,就定位菜单的左坐标为当前鼠标位置*/
                    menu.style.left = drawing.scrollLeft + evt.clientX + "px";
 
                /*如果从鼠标位置到容器下边的空间小于菜单的高度,就定位菜单的上坐标(Top)为当前鼠标位置向上一个菜单高度*/
                if (bottomedge < menu.offsetHeight)
                    menu.style.top = drawing.scrollTop + evt.clientY - menu.offsetHeight + "px";
                else
                /*否则,就定位菜单的上坐标为当前鼠标位置*/
                    menu.style.top = drawing.scrollTop + evt.clientY + "px";
 
                /*设置菜单可见*/
                menu.style.visibility = "visible";
                LTEvent.addListener(menu, "contextmenu", LTEvent.cancelBubble);
            }
            /*隐藏菜单*/
            function hideMenu() {
                menu.style.visibility = 'hidden';
            }
            LTEvent.addListener(drawing, "contextmenu", LTEvent.cancelBubble);
            LTEvent.addListener(drawing, "contextmenu", showMenu);
            LTEvent.addListener(document, "click", hideMenu);
        }
    </script>
</head>
<body>
    <div id="drawing">
    </div>
    <!--自定义右键菜单-->
    <div id="menu" class="skin">
        <ul>
            <li><strong>HTML 学习</strong></li>
            <li>HTML 元素</li>
            <li>HTML 属性</li>
            <li>HTML 标题</li>
            <li>HTML 段落</li>
            <li>HTML 图像</li>
            <li>HTML 表格</li>
            <li>HTML 列表</li>
            <li>HTML 布局</li>
            <li>表单</li>
        </ul>
    </div>
</body>
</html>

  

posted @   每天进步多一点  阅读(690)  评论(0编辑  收藏  举报
编辑推荐:
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
阅读排行:
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· 2 本地部署DeepSeek模型构建本地知识库+联网搜索详细步骤
历史上的今天:
2018-06-28 C# 可选参数 命名参数
点击右上角即可分享
微信分享提示