自定义页面右键菜单

96天前409阅读约1分钟 

无聊奇怪的知识点又来了,先看下图:

没错,如上图箭头所指的地方,就是在你的网站自定义一个右键菜单,代码直接上:

// 简单的样式代码,复杂的话也可以加图标啥的,自行美化吧
<style type="text/css">
#ul{background-repeat:no-repeat;background-position:center center;background-size:cover;font-size:1em!important;width:100px;-moz-box-shadow:1px 1px 4px rgba
(0,0,0,.2);box-shadow:0px 0px 4px #333;position:absolute;display:none;z-index:10000;opacity:0.9; border-radius: 8px;list-style-type:none;list-style-position:outside;margin:0px;padding:0px;background:#fff !important;}
#ul li{margin:0px;padding:0px;line-height:35px;}
#ul li a{text-decoration:none;color:#666;padding:0 15px;display:block;}
#ul li a:hover{cursor:pointer;background:transparent !important;color:#000;}
</style>
// 右键菜单源码
<ul id="ul">
  <li><a href=" "><span>首页</span></a ></li>
  <li><a href="javascript:history.go(1);"><span>前进</span></a ></li>
  <li><a href="javascript:history.go(-1);"><span>后退</span></a ></li>
  <li><a href="javascript:window.location.reload();"><span>重载</span></a ></li>
  <li><a href="https://www.jdeal.cn/messages.html"><span>留言板</span></a ></li>
  <li><a href="https://www.jdeal.cn/links.html"><span>申请友链</span></a ></li> 
</ul>
// Js 源码
<script>
 var ul = document.getElementById('ul');
 document.oncontextmenu=function(e){
 e=e||window.event;
 e.preventDefault?e.preventDefault():(e.returnValue=false);
 var x=e.clientX;
 var y=e.clientY;
 ul.style.display='block';
 ul.style.top=y+'px';
 ul.style.left=x+'px';
 };
 document.onclick=function () {
 ul.style.display='none';
 };
</script>

放入网站底部文件即可使用,还不错,看着挺好,哈哈。

.ps 当然如果你的网站引用了 jQuery,也可以使用超级中二版本(自己扒),我无意中看到的,哈哈,还带音效哦.. #效果预览链接

JavascriptHTML7 

自定义页面右键菜单 - Jdeal | Life is like a Design.