JavaScript模拟鼠标右键菜单效果

 更新时间:2016年03月04日 09:52:27   作者:Cakty、Riven   我要评论
这篇文章主要为大家详细介绍了JavaScript模拟鼠标右键菜单效果的实现代码,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了JavaScript模拟鼠标右键菜单的具体代码,供大家参考,具体代码如下
效果图:

具体代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>右键菜单</title>
  <style type="text/css">
    *{
      margin: 0;
      padding: 0;
    }
    #menu{
      width: 254px;
      /*background-color: #ccc;*/
      font-size: 12px;
      position: fixed;
      top: 0px;
      left: 0px;
      /*height: 240px;*/
      /*padding-left: 26px;*/
      padding-top: 2px;
      border:1px solid #ccc;
      display: none;
    }
    #menu li{
      list-style: none;
      line-height: 25px;
      margin-left: -1px;
      padding-left: 26px;
    }
    #menu li:hover{
      background-color: #4281f4;
      color: #fff;
    }
  </style>
</head>
<body>
   <ul id="menu">
     <li>返回(B)</li>
     <li>前进(F)</li>
     <li>从新加载(R)</li>
     <li>另存为(A)</li>
     <li>打印(P)</li>
     <li>查看网页源代码(V)</li>
     <li>查看网页信息(I)</li>
     <li>审查元素(N)</li>
   </ul>
   <script type="text/javascript">
    var menu = document.getElementById("menu");
    document.oncontextmenu =function(e){
      var e = e ||window.event;//兼容
     console.log(e.clientX,e.clientY);
     console.log(e);
     //单击显示div
     menu.style.display = "block";
     //设置定义
     //判断鼠标坐标是否大于视口宽度-块本身宽度
     var cakLeft = (e.clientX > document.documentElement.clientWidth - menu.offsetWidth)?(document.documentElement.clientWidth - menu.offsetWidth):e.clientX;
     var cakTop = (e.clientY > document.documentElement.clientHeight - menu.offsetHeight)?(document.documentElement.clientHeight - menu.offsetHeight):e.clientY;
     menu.style.left = cakLeft + "px";
     menu.style.top = cakTop + "px";
    return false;
    }
      menu.onclick = function(e) {
    var e = e || window.event;
    e.cancelBubble = true;
    //阻止冒泡。
  }
   document.onclick = function() {
    menu.style.display = "none";
  }
   </script>
</body>
</html>

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

相关文章

  • js实现鼠标拖动图片并兼容IE/FF火狐/谷歌等主流浏览器

    js实现鼠标拖动图片并兼容IE/FF火狐/谷歌等主流浏览器

    js实现鼠标拖动图片做了兼容IE,FF火狐,谷歌等主流浏览器,具体实现代码如下,感兴趣的朋友可以参考下哈,希望对你有所帮助
    2013-06-06
  • JavaScript中的值类型详细介绍

    JavaScript中的值类型详细介绍

    这篇文章主要介绍了JavaScript中的值类型详细介绍,本文讲解了Primitive、Object、JS自带全局对象、Immutable与Mutable等内容,需要的朋友可以参考下
    2014-12-12
  • 基于bootstrap实现bootstrap中文网巨幕效果

    基于bootstrap实现bootstrap中文网巨幕效果

    这篇文章主要介绍了基于bootstrap实现bootstrap中文网巨幕效果,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-05-05
  • 利用原生JS实现data方法示例代码

    利用原生JS实现data方法示例代码

    这篇文章主要给大家介绍了关于如何利用原生JS实现data方法的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用原生JS具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-05-05
  • 详解React 在服务端渲染的实现

    详解React 在服务端渲染的实现

    这篇文章主要介绍了详解React 在服务端渲染的实现,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • JS+Canvas实现的俄罗斯方块游戏完整实例

    JS+Canvas实现的俄罗斯方块游戏完整实例

    这篇文章主要介绍了JS+Canvas实现的俄罗斯方块游戏,结合完整实例形式分析了Canvas技术实现俄罗斯方块游戏的步骤、技术难点与相关实现技巧,需要的朋友可以参考下
    2016-12-12
  • 学习JavaScript事件流和事件处理程序

    学习JavaScript事件流和事件处理程序

    这篇文章主要为大家介绍了学习JavaScript事件流和事件处理程序的注意事项,感兴趣的小伙伴们可以参考一下
    2016-01-01
  • js奇偶数判断的代码

    js奇偶数判断的代码

    js奇偶数判断的代码...
    2007-05-05
  • 轻松实现JavaScript图片切换

    轻松实现JavaScript图片切换

    这篇文章主要帮助大家轻松实现JavaScript图片切换,内容很精简,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-01-01
  • JS中验证整数和小数的正则表达式

    JS中验证整数和小数的正则表达式

    网上很多关于验证小数的正则表达式,但是很多都不是百分百正确,所以我结合一些前辈的经验,写了一个,分享到澳门金沙网上娱乐平台,对小数或整数正则表达式的相关知识感兴趣的朋友一起看看吧
    2018-10-10

最新评论