js实现右键管理

来源：互联网发布：c语言http服务器编辑：程序博客网时间：2024/06/06 09:20

<html>
<head>
<title>无标题页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script src="js/jquery1.11.js" type="text/javascript"></script>
<script type="text/javascript">
//屏蔽浏览器的右键
document.oncontextmenu = function(){
return false;
}
//鼠标点击右键
$(document).mousedown(function(shubiao){
var key = shubiao.which;//键盘 (右键为3 左键 1 滑轮 2 )
//alert(key);
if(key == 3){
var x = shubiao.clientX;//x轴
var y = shubiao.clientY;//y轴
//定位
$("#asd").html("x = "+x+",y = "+y);
//右键定位
$(".desk").show().css({left:x,top:y});
}
});
//点击空白区域隐藏右键
$(document).click(function(){

$(".desk").hide();
});
//方法
function asd(a){
if(a == 1){
alert("添加应用");
}else if(a == 2){
alert("获取笔记");
}else if(a == 3){
alert("刷新");
}
}
$(function(){

});

</script>

<style type="text/css">
*{margin:0;padding:0;}
body{background:url("images/asd.jpg");}
/*desk start*/
.desk{width:200px;height:180px;
background:#fff;
font-size:12px;font-family:"微软雅黑";
color:#666;
box-shadow:1px 1px 30px 3px #ccc;
position:absolute;/*绝对定位*/
display:none;
}

.desk ul li{border:1px solid #ddd;list-style:none;font-size:14px;
line-height:34px;padding-left:10px;
}
/*鼠标移动效果*/
.desk ul li:hover{background:#647E7C;color:#fff;}

/* end desk*/
#asd{font-size:20px;color:#FFF;margin:0 auto;}

</style>

</head>
<body>
<form method="post" action="">


<div class="desk" >
<ul>
<li onclick="asd(1)">添加应用</li>
<li onclick="asd(2)">获取笔记</li>
<li onclick="asd(3)">刷新</li>
<li onclick="asd(4)">上传资料</li>
<li onclick="asd(5)">更换背景</li>

</ul>
<p id="asd"></p>
</div>


</form>
</body>
</html>

0 0