新增第219个小实例：右键菜单

2023-05-15 17:48:06 +08:00 · 2023-05-15 17:48:06 +08:00 · 9cb2e07211
parent caac50bf4c
commit 9cb2e07211
4 changed files with 107 additions and 0 deletions
--- a/README.md
+++ b/README.md
@ -226,6 +226,7 @@
 216. HTML5+CSS3+JS小实例：科技感满满的数字科技脸特效
 217. HTML5+CSS3+JS小实例：锥形渐变彩虹按钮
 218. HTML5+CSS3小实例：彩色拨动开关
+219. HTML5+CSS3+JS小实例：右键菜单

 #### 赞赏作者
 ![image](https://gitee.com/wyanhui02/html_css_demo/raw/master/images/%E8%B5%9E%E8%B5%8F%E4%BD%9C%E8%80%85/%E8%B5%9E%E8%B5%8F%E7%A0%81.jpg)
--- a/code/219/219.css
+++ b/code/219/219.css
@ -0,0 +1,36 @@
+*{
+    margin: 0;
+    padding: 0;
+}
+body{
+    min-height: 100vh;
+    background-color: #f2f2f2;
+}
+h1{
+    text-align: center;
+    padding: 50px;
+}
+.menu{
+    width: 180px;
+    background-color: #fff;
+    padding: 10px;
+    border-radius: 10px;
+    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: 99;
+    /* 默认隐藏 */
+    opacity: 0;
+}
+.menu li{
+    list-style-type: none;
+    padding: 12px;
+    background-color: #fff;
+    border-radius: 10px;
+    cursor: pointer;
+}
+.menu li:hover{
+    background-color: cornflowerblue;
+    color: #fff;
+}
--- a/code/219/219.html
+++ b/code/219/219.html
@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>右键菜单</title>
+    <link rel="stylesheet" href="219.css">
+</head>
+<body>
+    <h1>任意位置 右键试试</h1>
+    <ul class="menu">
+        <li>员工</li>
+        <li>部门</li>
+        <li>角色</li>
+        <li>权限</li>
+        <li>设置</li>
+    </ul>
+</body>
+</html>
+<script src="219.js"></script>
--- a/code/219/219.js
+++ b/code/219/219.js
@ -0,0 +1,49 @@
+// 菜单
+const menu=document.querySelector('.menu');
+
+// 绑定右键事件
+document.addEventListener('contextmenu',function(e){
+    // 取消默认的浏览器自带右键
+    e.preventDefault();
+    // 窗口宽高
+    let winWidth=window.innerWidth;
+    let winHeight=window.innerHeight;
+    // 鼠标点击的位置
+    let posX=e.pageX;
+    let posY=e.pageY;
+    // 菜单宽高
+    let menuWidth=menu.getBoundingClientRect().width;
+    let menuHeight=menu.getBoundingClientRect().height;
+    // 菜单要显示的位置
+    let posLeft=0,posTop=0;
+    // 菜单显示时可能遇到的几种情况：
+    // 右边和底部同时超出
+    if(posX+menuWidth>=winWidth && posY+menuHeight>=winHeight){
+        posLeft=posX-menuWidth;
+        posTop=posY-menuHeight;
+    }
+    // 右侧超出
+    else if(posX+menuWidth>=winWidth){
+        posLeft=posX-menuWidth;
+        posTop=posY;
+    }
+    // 底部超出
+    else if(posY+menuHeight>=winHeight){
+        posLeft=posX;
+        posTop=posY-menuHeight;
+    }
+    // 默认情况，都不超出
+    else{
+        posLeft=posX;
+        posTop=posY;
+    }
+    // 设置菜单的位置并显示
+    menu.style.left=posLeft+'px';
+    menu.style.top=posTop+'px';
+    menu.style.opacity=1;
+})
+
+// 最后，加个单击其他地方关闭菜单
+document.addEventListener('click',function(){
+    menu.style.opacity=0;
+})