js實現右鍵管理
<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="">
<!---desk start-->
<div class="desk" >
<ul>
<li οnclick="asd(1)">添加應用</li>
<li οnclick="asd(2)">獲取筆記</li>
<li οnclick="asd(3)">刷新</li>
<li οnclick="asd(4)">上傳資料</li>
<li οnclick="asd(5)">更換背景</li>
</ul>
<p id="asd"></p>
</div>
<!--end desk-->
</form>
</body>
</html>
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
由淺入深在實踐中玩轉Zabbix，解決剩下20%的監控需求！
本文整理自Zabbix中級認證專家李銘栓（滿分學員）在Zabbix Meetup廣州站的演講。 掌握這幾種監控方式解決80%的監控問題，剩下的20%如何實現？這裏有答案！ 幾點經驗分享： 1