注：图片跟jquery-1.11.1.min.js可网上下载。
<style type="text/css">
*{margin:0;padding:0;}
body{background:url("images/bg.jpg");font-size:12px;font-family:"微软雅黑";color:#666;}
/*menu start*/
.menu{width:200px;background:#fff;box-shadow:1px 1px 40px #ccc;display:none;position:absolute;}
.menu ul li{list-style:none;line-height:36px;font-size:14px;padding-left:10px;border-bottom:1px solid #ddd;}
.menu ul li:hover{background:#647E7C;color:#fff;}
/*end menu*/
#zb{font-size:30px;color:#fff;text-align:center;}
</style>
<body>
<!--menu start-->
<div class="menu">
<ul>
<li onclick="tz_menu(1);">添加应用</li>
<li onclick="tz_menu(2);">获取课程</li>
<li onclick="tz_menu(3);">添加笔记</li>
<li onclick="tz_menu(4);">刷新</li>
<li onclick="tz_menu(5);">上传资料</li>
<li onclick="tz_menu(6);">更换背景</li>
<li onclick="tz_menu(7);">注销</li>
</ul>
</div>
<!--end menu-->
<p id="zb"></p>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<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 纵坐标
// $("#zb").html("x = " + x + " , y = " + y); 显示坐标值
// 获取menu的宽度和高度
var menuHeight = $(".menu").height();
var menuWidth = $(".menu").width();
// 获取浏览器的可见高度和宽度
var clientHeight = getClientHeight();
var clientWidth = getClientWidth();
// 判断
if(menuHeight + y > clientHeight){
y = clientHeight - menuHeight - 5;
}
if(menuWidth + x > clientWidth){
x = clientWidth - menuWidth - 5;
}
$(".menu").show().css({left:x,top:y});
}
});
// 点击空白区域 隐藏鼠标右键
$(document).click(function(){
$(".menu").hide();
});
// 点击每一项右键所需要执行的方法
function tz_menu(i){
if(i == 1){
alert("添加应用");
} else if(i == 2){
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>
效果：
