首页 > 开发 > JS > 正文

javascript鼠标右键菜单自定义效果

2024-05-06 16:27:57
字体:
来源:转载
供稿:网友
设计专属于自己的右键菜单,添加自己需要的快捷方式,本文就为大家分享自定义javascript鼠标右键菜单的实现方法,感兴趣的小伙伴们可以参考一下
 

本文实例讲解了javascript鼠标右键菜单的实现方法,分享给大家供大家参考,具体内容如下

效果图:

javascript鼠标右键菜单自定义效果

具体代码:

<html>  <head>    <meta charset="gb2312" />    <title></title>    <style>      #menu{        border:solid 1px gray;        width:100px;        display:none;        position:absolute;        background-color:ghostwhite;        margin: 0;        padding: 0;        list-style-type: none;      }      #menu>li{        border-bottom: dashed 1px gray;      }    </style>    <script type="text/javascript">    window.onload=function(){      var oUl=document.getElementById('menu');        document.oncontextmenu=function(ev){          var oEvent=ev||event;          //一定要加px,要不然chrom不认          oUl.style.top=oEvent.clientY+'px';          oUl.style.left=oEvent.clientX+'px';          oUl.style.display='block';          return false;        }        document.onclick=function(){          oUl.style.display='none';        }    };    </script>  </head>  <body><ul id="menu">  <li><a href="http://www.vevb.com/" target="_blank">VeVb武林网</a></li>  <li><a href="http://www.vevb.com/" target="_blank">VeVb武林网</a></li>  <li><a href="http://www.vevb.com/" target="_blank">VeVb武林网</a></li>  <li><a href="http://www.vevb.com/" target="_blank">VeVb武林网</a></li></ul>  </body></html>

希望本文所述对大家学习javascript程序设计有所帮助。



注:相关教程知识阅读请移步到JavaScript/Ajax教程频道。
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表