98 lines
2.3 KiB
HTML
98 lines
2.3 KiB
HTML
<!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}
|
||
|
||
} |