<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
/*body{
cursor: url("./img/erh.png"), auto;
}*/
#wrapper{
border: 1px solid #ccc;
150px;
height: 200px;
display: none;
position: absolute;/*想移動必須定位*/
top: 0;
left: 0;
right: 0;
bottom:0;
}
</style>
<body>
<div id="wrapper">
哈哈哈哈哈哈
</div>
<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
window.onload = function() {
document.oncontextmenu = function(e) {
$("#wrapper").show()
var obj = document.getElementById('wrapper');
obj.style.left=e.clientX+"px";
obj.style.top=e.clientY+"px";//鼠標的坐標（鼠標在哪，內容就在哪）
var bodyW=document.body.scrollWidth
var bodyH=document.body.scrollHeight //整個頁面的高
var mouseW=e.clientX
var mouseH=e.clientY //鼠標點擊的高度坐標
var needW=bodyW - mouseW
var needH=bodyH - mouseH //窗口底部到div展示高的差值
if(needW < 160){
obj.style.left=mouseW - 152+"px";//鼠標位置減去內容的寬度就是最終內容顯示的位置
}
if(needH < 210){
obj.style.top=mouseH -202+"px";
}
return false; //取消右键点击的默认事件
};
document.onclick = function(e) {
$("#wrapper").hide()
};
}
</script>
</body>
</html>