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

 更新时间:2020年12月08日 15:36:06   作者:caichao  
设计专属于自己的右键菜单,添加自己需要的快捷方式,本文就为大家分享自定义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="//www.jb51.net/" target="_blank">脚本之家</a></li>
 <li><a href="//www.jb51.net/" target="_blank">脚本之家</a></li>
 <li><a href="//www.jb51.net/" target="_blank">脚本之家</a></li>
 <li><a href="//www.jb51.net/" target="_blank">脚本之家</a></li>
</ul>
 </body>
</html>

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

相关文章

  • 利用原生js和jQuery实现单选框的勾选和取消操作的方法

    利用原生js和jQuery实现单选框的勾选和取消操作的方法

    下面小编就为大家带来一篇利用原生js和jQuery实现单选框的勾选和取消操作的方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-09-09
  • JavaScript高级教程5.6之基本包装类型(详细)

    JavaScript高级教程5.6之基本包装类型(详细)

    在基本类型当中,有三种类型是我们经常使用的:boolean,number,string,通过本篇文章给大家介绍javascript高级教程5.6之基本包装类型,感兴趣的朋友一起学习吧
    2015-11-11
  • JS中静态页面实现微信分享功能

    JS中静态页面实现微信分享功能

    小编使用ajax实现静态页面也能实现微信分享功能,今天小编给大家分享实现代码,对js静态页面微信分享功能感兴趣的朋友参考下本文
    2017-02-02
  • JavaScript开发简单易懂的Svelte实现原理详解

    JavaScript开发简单易懂的Svelte实现原理详解

    这篇文章主要为大家介绍了JavaScript开发简单易懂的Svelte实现原理的内容详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步
    2021-11-11
  • 微信小程序实现tabbar凹凸圆选中动画效果实例

    微信小程序实现tabbar凹凸圆选中动画效果实例

    小程序日益增多的情况下,UI风格显得越来越重要,下面这篇文章主要给大家介绍了关于微信小程序实现tabbar凹凸圆选中动画效果的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-09-09
  • 基于JavaScript实现省市联动效果

    基于JavaScript实现省市联动效果

    这篇文章主要为大家详细介绍了JavaScript实现省市联动效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-06-06
  • javascript ES6 Template String模板字符串使用方法

    javascript ES6 Template String模板字符串使用方法

    这篇文章主要介绍了javascript ES6 模板字符串(Template String)是增强版的字符串,用反引号(`)标识,它可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量,需要的朋友可以参考下
    2023-06-06
  • 纯js+css实现仿移动端淘宝网站的弹出详情框功能

    纯js+css实现仿移动端淘宝网站的弹出详情框功能

    这篇文章主要介绍了纯js+css实现仿移动端淘宝网站的弹出详情框功能,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-12-12
  • JS localStorage实现本地缓存的方法

    JS localStorage实现本地缓存的方法

    JS localStorage实现本地缓存的方法,需要的朋友可以参考一下
    2013-06-06
  • 简洁短小的 JavaScript IE 浏览器判定代码

    简洁短小的 JavaScript IE 浏览器判定代码

    IE浏览器不管是什么版本,总是跟Web标准有些不太兼容。对于代码工作者来说,自然是苦不堪言,为了考虑IE的兼容问题,不管是写 CSS 还是 JS,往往都要对 IE 特别对待,这就少不了做些判断。本文不讨论如何区分 IE 的样式,仅是 JS 判定 IE 浏览器。
    2010-03-03

最新评论