bmy/ClassContent
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
编码猿
2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
历届学生/font-end-nine/项目练习/学生项目/冯文焌/5js/右键菜单.html Normal file
View File

@@ -0,0 +1,98 @@
<!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>Document</title>
<style>
body{
height: 100vh;
}
body,ul,li{
margin: 0;
padding: 0;
list-style: none;
}
ul{
width: 160px;
border-radius: 10px;
box-shadow: 2px 2px 2px #c7b7b7;
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>
<li>辅助</li>
</ul>
</body>
<script>
// 整体里面的右键菜单
$("body").oncontextmenu = function (e) {
// 防止默认值
e.preventDefault();
// 从点击中拿到x,y的值
var { x, y } = e;
// 目前设备的宽和高，显示出来的
var { clientWidth, clientHeight } = document.body;
// 如果当前屏幕的宽-鼠标x的位置<菜单的宽 同时当前屏幕的高-鼠标y的位置<菜单的高
if (clientWidth - x < 152 && clientHeight - y < 160) {
// 定义菜单的位置在y - 200，x - 160的位置
$("ul").style = `
top: ${y - 160}px;
left: ${x - 152}px;
display: block;
`
// 显示出来
} else if (clientWidth - x < 152) {
$("ul").style = `
top: ${y}px;
left: ${x - 152}px;
display: block;
`
} else if (clientHeight - 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>
$("body").oncontextmenu = function(e){
e.preventDefault();
var { x,y } = e;
var { cl}
}