first commit

历届学生/font-end-nine/项目练习/学生项目/杨锐/js联习/右键菜单.html

@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<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>
+    <style>
+        body {
+            height: 100vh;
+        }
+
+        body,
+        ul,
+        li {
+            margin: 0;
+            padding: 0;
+            list-style: none;
+        }
+
+        ul {
+            width: 152px;
+            border-radius: 6px;
+            box-shadow: 2px 2px 9px #d7d7d7;
+            display: none;
+            position: fixed;
+        }
+
+        li {
+            height: 40px;
+            padding: 0 15px;
+            box-sizing: border-box;
+            line-height: 40px;
+        }
+    </style>
+</head>
+
+<body>
+    <ul>
+        <li>新建文件夹</li>
+        <li>上传文件</li>
+        <li>上传文件夹</li>
+        <li>刷新网页</li>
+    </ul>
+</body>
+<script>
+   $("body").oncontextmenu = function (e) {
+    //设置在网页上的右击事件  并且（e）代表的是右击事件的形参 
+        e.preventDefault();
+        //取消网页上自带的右击事件
+        var { x, y } = e;
+        var { w, h } = document.body;
+        //定义两个数组一个存放当前右击的x轴 y轴坐标
+        //另一个存放页面的宽和高 注意：要给boby设置高度
+        if (w - x < 152 && h - y < 160) {
+            //如果屏幕宽度减去当前右击x轴坐标小于我们所定义元素宽度
+            // 并且屏幕高度减去当前右击y轴坐标小于我们所定义元素高度时
+            $("ul").style = `
+            top: ${y - 160}px;
+                left: ${x - 152}px;
+                display: block;
+            `
+            //我们所定义的元素所在位置为元素自身所在的x,y轴减去元素本身的宽高
+            //也就是当在右下角点击时弹窗在左上
+        } else if (w - x < 152) {
+            $("ul").style = `
+            top: ${y}px;
+                left: ${x - 152}px;
+                display: block;
+            `
+            //
+        } else if (h - y < 160) {
+            $("ul").style = `
+            top: ${y - 160}px;
+                left: ${x}px;
+                display: block;
+            `
+        } else {
+            $("ul").style = `
+            top: ${y}px;
+                left: ${x}px;
+                display: block;
+                `
+        }
+
+    }
+
+
+
+
+    function $(className) {
+        return document.querySelector(className)
+    }
+</script>
+
+</html>