自定义右击菜单,很棒的效果
效果图:
第一步:做一个菜单
第二步:通过js屏蔽浏览器鼠标右击
第三步:获取鼠标点击的x,y;与菜单的长宽,浏览器长和宽比较,
第四步:定位显示
参考下面代码,亲测可用:
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>右击鼠标</title>
<meta name="Keywords" content="关键词,关键词">
<meta name="Description" content="">
<style type="text/css">
*{margin:0;padding:0;}
body{font-family:"微软雅黑";font-size:16px;background:#666; color:#666;}
.menu{width:155px;background:#fff;box-shadow:1px 1px 30px #ccc;display:none;
position:absolute;}
.menu ul li{list-style:none;line-height:35px;padding-left:16px;
border-bottom:1px solid #ddd;}
.menu ul li:hover{background:#647E7C;color:#fff;}
</style>
<!--导入jquery类库-->
<script type = "text/javascript" src = "js/jquery-1.11.1.min.js"></script>
</head>
<body>
<div class = "menu">
<ul>
<li onclick = "jy_menu(0)">打开</li>
<li onclick = "jy_menu(1)">刷新(R)</li>
<li onclick = "jy_menu(2)">复制(C)</li>
<li onclick = "jy_menu(3)">粘贴(V)</li>
<li onclick = "jy_menu(4)">注销</li>
</ul>
</div>
<script type = "text/javascript">
//首先屏蔽到浏览器自带的右键功能
document.oncontextmenu = function(){
return false;
};
//点击鼠标三键
$(document).mousedown(function(e){
//1是左键;2是中间键;3是右键
var key = e.which;
if(key == 3){
var x = e.clientX; //x坐标
var y = e.clientY; //y坐标
//获取menu的长宽
var menuHeight = $(".menu").height();
var menuWidth = $(".menu").width();
//获取浏览器的可见长宽
var clintHeight = getClientHeight();
var clintWidth = getClientWidth();
//判断
if(menuHeight + y >= clintHeight){
y = clintHeight - menuHeight - 8;
}
if(menuWidth + x >= clintWidth){
x = clintWidth - menuWidth - 8;
}
//之前必须要绝对定位才行
$(".menu").show().css({left:x,top:y});
}
});
//点击空白隐藏鼠标右键
$(document).click(function(){
$(".menu").hide();
});
//响应事件
function jy_menu(i){
switch(i){
case 0:
alert("这是打开操作");break;
case 1:
alert("这是刷新操作");break;
case 2:
alert("这是复制操作");break;
case 3:
alert("这是粘贴操作");break;
default:
alert("这是注销操作");
}
}
// 浏览器的可见高度
function getClientHeight() {
var clientHeight = 0;
if (document.body.clientHeight && document.documentElement.clientHeight) {
clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight: document.documentElement.clientHeight;
} else {
clientHeight = (document.body.clientHeight > document.documentElement.clientHeight) ? document.body.clientHeight: document.documentElement.clientHeight;
}
return clientHeight;
}
// 浏览器的可见宽度
function getClientWidth() {
var clientWidth = 0;
if (document.body.clientWidth && document.documentElement.clientWidth) {
clientWidth = (document.body.clientWidth < document.documentElement.clientWidth) ? document.body.clientWidth: document.documentElement.clientWidth;
} else {
clientWidth = (document.body.clientWidth > document.documentElement.clientWidth) ? document.body.clientWidth: document.documentElement.clientWidth;
}
return clientWidth;
}
</script>
</body>
</html>
只需要使用自己的Jquery文件即可,不需要添加其他内容。
更多干货等你来拿 http://www.itit123.cn/