一款纯js写的自定义右键弹出菜单,里面的图标都是png图,可以自行替换,点击出现的提示也可以自由设置。
CSS样式和javascript代码均写在head部分,引入的javascript插件也在头部引入:
body,div,span,h2 {
margin: 0;
padding: 0
}
body {
background: url(images/bg.jpg);
background-position: center;
background-size: cover;
font-family: 'Microsoft YaHei','Lantinghei SC','Open Sans',Arial,'Hiragino Sans GB','STHeiti','WenQuanYi Micro Hei','SimSun',sans-serif;
}
.box {
width: 1000px;
height: 800px;
margin: 20px auto;
border-radius: 10px;
background: #EDEDED;
box-shadow: #000 0 0 15px inset;
-webkit-box-shadow: #000 0 0 15px inset;
-moz-box-shadow: #000 0 0 15px inset;
-o-box-shadow: #000 0 0 15px inset;
padding: 20px;
color: #ccc;
font-size: 36px;
font-weight: bolder
}
.kinerMenuBox {
width: 200px;
background: #FEFEFE;
border: solid 1px #444;
cursor: pointer;
border-radius: 10px;
overflow: hidden;
box-shadow: 1px 1px 5px #000,-1px -1px 5px #fff;
-webkit-box-shadow: 1px 1px 5px #000,-1px -1px 5px #fff;
-moz-box-shadow: 1px 1px 5px #000,-1px -1px 5px #fff;
-o-box-shadow: 1px 1px 5px #000,-1px -1px 5px #fff;
font-size: 16px;
position: absolute
}
.kinerMenuBox .kinerMenuTitle {
background: #DDD;
padding: 10px 5px;
border-bottom: inset #444 1px;
cursor: default
}
.kinerMenuBox .kinerMenuTitle .kinerMenuTitleIcon {
width: 30px;
height: 30px
}
.kinerMenuBox .kinerMenuTitle .kinerMenuTitleCon {
height: 30px;
line-height: 30px;
padding-left: 10px;
color: #444;
font-size: 18px;
display: inline-block;
vertical-align: top
}
.kinerMenuBox .kinerMenuItem {
background: #FFF;
padding: 5px 5px
}
.kinerMenuBox .kinerMenuItem:hover {
background: #CCC
}
.kinerMenuBox .kinerMenuItem .kinerMenuItemIcon {
display: inline-block;
width: 30px;
height: 30px
}
.kinerMenuBox .kinerMenuItem .kinerMenuItemCon {
height: 30px;
line-height: 30px;
padding-left: 10px;
position: relative;
color: #444;
font-size: 16px;
display: inline-block;
vertical-align: top
}
.kinerMenuBox .kinerSeparator {
width: 100%;
height: 1px;
border-bottom: dashed 1px #444;
border-left: none;
border-right: none
}
.kinerMenuBox .kinerKeyMap {
margin-right: 5px;
right: 10px;
position: absolute;
color: #444;
height: 30px;
line-height: 30px;
display: inline-block
}
<script type="text/javascript" src="js/contextmenu.js"></script>
<script>
window.onload = function() {
console.log(contextMenu);
new contextMenu({
target: document.getElementById("box"),
hasIcon: !0,
hasTitle: !0,
autoHide: !0,
linkClass: !0,
menu: {
title: {
icon: "images/em_01.png",
content: "菜单标题"
},
items: [{
icon: "images/em_02.png",
content: "菜单项1",
action: function(n, t) {
alert(t.content)
},
keymap: "alt+1"
}, "-",
{
icon: "images/em_04.png",
content: "菜单项2",
action: function(n, t) {
alert("点击:" + t.content)
},
keymap: "alt+2"
}, {
icon: "images/em_05.png",
content: "菜单项3",
action: function(n, t) {
alert("点击:" + t.content)
},
keymap: "ctrl+j"
}, {
icon: "images/em_06.png",
content: "菜单项4",
action: function(n, t) {
alert("点击:" + t.content)
},
keymap: "shift+y"
}, "-",
{
icon: "",
content: "菜单项5",
action: function(n, t) {
console.log(n, t, this)
}
}, {
icon: "images/em_07.png",
content: "菜单项6",
action: function(n, t) {
alert("点击:" + t.content)
}
}, {
icon: "images/em_08.png",
content: "菜单项7",
action: function(n, t) {
alert("点击:" + t.content)
}
}]
},
classes: {
menuBox: {
width: "200px",
background: "#FEFEFE",
border: "solid 1px #333",
cursor: "pointer",
"border-radius": "10px",
overflow: "hidden",
"box-shadow": "-1px -1px 5px #000,1px 1px 5px #ccc",
"-webkit-box-shadow": "-1px -1px 5px #000,1px 1px 5px #ccc",
"-moz-box-shadow": "-1px -1px 5px #000,1px 1px 5px #ccc",
"-o-box-shadow": "-1px -1px 5px #000,1px 1px 5px #ccc",
"font-size": "16px"
},
menuTitle: {
self: {
background: "#DDDDDD",
padding: "10px 5px",
"border-bottom": "inset #000 1px",
cursor: "default"
},
icon: {
width: "30px",
height: "30px"
},
content: {
height: "30px",
"line-height": "30px",
"padding-left": "10px",
color: "#333333",
"font-size": "18px",
display: "inline-block",
"vertical-align": "top"
}
},
item: {
self: {
background: "#FFF",
padding: "5px 5px"
},
icon: {
width: "30px",
height: "30px"
},
content: {
height: "30px",
"line-height": "30px",
"padding-left": "10px",
color: "#333333",
"font-size": "16px",
display: "inline-block",
"vertical-align": "top"
},
hover: {
background: "#ccc"
},
keymap: {
"margin-right": "5px",
color: "blue"
}
},
separator: {
width: "100%",
height: "1px",
border: "solid 1px #000",
"border-left": "none",
"border-right": "none"
}
}
})
};
body部分只有一个div容器,用来设置鼠标右键的触发区域,代码如下:
<div class="box" id="box" unselectable="on" onselectstart="return!1" style="-moz-user-select:none;-webkit-user-select:none;cursor:default;font-size:20px;">
请对着白色区域右键单击....<br>
<br>
(或使用快捷键【 alt+1 , alt+2 , ctrl+j , shift+y 】)
</div>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791