自定义浏览器右击菜单

最新推荐文章于 2023-09-07 14:28:13 发布

思想永无止境

最新推荐文章于 2023-09-07 14:28:13 发布

阅读量823

点赞数

分类专栏： Web前端文章标签：右键菜单 Javascript 浏览器

Web前端专栏收录该内容

86 篇文章 1 订阅

订阅专栏

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>show menu</title>
</head>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
ul{
text-decoration:none;
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
list-style:none;
}
ul li{
width:100%;
height:25px;
line-height:25px;
margin:0px;
text-align:center;
}
ul li a{
display:block;
border-left:10px #f7d solid;
background:#CCC;
color:#333;
padding:3px;
text-decoration:none;
}
ul li a:hover{
background:#3cf;
color:#fff;
}
</style>

<script>
function showyj()
{
if(event.button==2)
{
var yj = document.getElementById("yj");
var yj2 = document.getElementById("yj2");
yj.style.display="block";
yj2.style.display="block";
if(event.clientX>1120||event.clientY>670)
{
yj.style.display="none";
yj2.style.display="none";
return;
}
yj.style.pixelLeft= event.clientX;
yj.style.pixelTop = event.clientY;
yj2.style.pixelLeft=event.clientX;
yj2.style.pixelTop =event.clientY;
}
else
{
return;
}
}
function closediv()
{
yj.style.display="none";
yj2.style.display="none";
}
//-------------------------//

/*菜单功能模块*/
function reflash()
{
window.location.reload();
}
function changerbg()
{
document.bgColor="#ccffcc";
}
function alertme()
{
alert("hello world"+document.URL);
}
function closewindow()
{
window.opener=null;
window.close();
}
function  changerchar()
{
var sObj = document.getElementsByTagName("span");
sObj[0].style.color="red";
}
function nosrcoll()
{
b1.scroll = "no"
}
//------------------------//
document.onmousedown = showyj;
document.onclick = closediv;
</script>
<body id="b1"  oncontextmenu="return false" >
<div id="yj" style="position:absolute; width:130px; height:180px; display:none; background:#999; z-index:1">
<ul>
     <li><a href="#" onClick="nosrcoll()">关掉滚动</a></li>
     <li><a href="#" onClick="changerchar()">字体变色</a></li>
     <li><a href="#" onClick="reflash()">刷新页面</a></li>
     <li><a href="#" onClick="changerbg()">背景变色</a></li>
     <li><a href="#" onClick="alertme()">弹出提示</a></li>
     <li><a href="#" onClick="closewindow()">退出系统</a></li>
  </ul>
</div>

<div id="yj2" style="position:absolute; width:133px; height:201px; display:none; background:#999; filter:alpha(opacity=30)">
</div>
<span style=" font-size:18px; position:absolute; top:300px; left:400px;">用鼠标点右键，会弹出与众不同的菜单来</span>
<p style="position:absolute; left:2; top=2; font:Verdana, Geneva, sans-serif; color:#F00"> 

</p> 
</body>
</html>

思想永无止境

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
自定义浏览器右击菜单

&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt;&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;&lt;title&gt;show menu&lt;/title&gt;&lt;/h
复制链接

扫一扫

专栏目录