第一步：首先简单布局
菜单布局
<body>
<div id="menu">
<div>另存为</div>
<div>全选</div>
<div>刷新</div>
<div>查看页面源代码</div>
<div>查看元素</div>
</div>
</body>
样式（先将菜单隐藏）
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
#menu div{
border:1px solid black;
width: 160px;
height: 40px;
line-height: 40px;
}
#menu div:hover{
background: pink;
}
#menu{
display: none;
position: absolute;
background: #fff;
}
</style>
第二步 (注意写在script标签中)
添加oncontextmenu 事件（当用户在页面中右击鼠标时执行 JavaScript ）
document.function(e){
var e=e||event; //传入参数e
var X=e.clientX; //获得鼠标在当前页面X轴的位置
var Y=e.clientY; //获得鼠标在当前页面Y轴的位置
menu.style.display="block"; //点击右键时，将隐藏的菜单显示出来
menu.style.left=X+"px" //菜单显示的位置与鼠标位置一致
menu.style.top=Y+"px"
return false; //将右键默认菜单隐藏
}
第三步
添加鼠标单击事件（当鼠标左键单击时，菜单隐藏）
document.function(){
menu.style.display="none";
}
完成
178
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
