网页自定义右键菜单教程

如果想让图标显示，请引用Font Awesome的库，方法百度和Google一大堆，不再赘述

效果

不知道为什么，Font Awesome的图标Google 和Refresh没有显示，我这个站也是Google图标被吞掉了，很是奇怪，有知道的大佬指点下~ HTML

代码语言：javascript复制

<div class="usercm" style="display: none;">
  <ul>
    <li><a href="javascript:alert('你的首页');"><i class="fa fa-home fa-fw"></i><span>首页</span></a></li>
    <li><a href="javascript:void(0);" onclick="getSelect();"><i class="fa fa-file fa-fw"></i><span>复制</span></a></li>
    <li><a href="javascript:void(0);" onclick="baiduSearch();"><i class="fa fa-search fa-fw"></i><span>百度搜索</span></a></li>
    <li><a href="javascript:void(0);" onclick="googleSearch();"><i class="fa fa-google fa-fw"></i><span>谷歌搜索</span></a></li>
    <li><a href="javascript:history.go(1);"><i class="fa fa-arrow-right fa-fw"></i><span>前进</span></a></li>
    <li><a href="javascript:history.go(-1);"><i class="fa fa-arrow-left fa-fw"></i><span>后退</span></a></li>
    <li style="border-bottom:1px solid gray"><a href="javascript:void(0);" onclick="toRefresh()"><i class="fa fa-refresh fa-fw"></i><span>刷新</span></a></li>
    <li><a href="javascript:alert('去友联页面');"><i class="fa fa-user fa-fw"></i><span>友情链接</span></a></li>
    <li><a href="javascript:alert('去留言页面');"><i class="fa fa-info-circle fa-fw"></i><span>关于我们</span></a></li>
  </ul>
</div>

CSS

代码语言：javascript复制

.usercm a {
  text-decoration: none;
}
div.usercm{
  background-repeat:no-repeat;
  background-position:center center;
  background-size:cover;
  background-color:#fff;
  font-size:13px!important;
  width:130px;
  -moz-box-shadow:1px 1px 3px rgba(0,0,0,.3);
  box-shadow:0px 0px 15px #333;
  position:absolute;
  display:none;
  z-index:10000;
  opacity:0.9;
  border-radius: 5px;
}
div.usercm ul{
  list-style-type:none;
  list-style-position:outside;
  margin:0px;padding:0px;
  display:block
}
div.usercm ul li{
  margin:0px;padding:0px;line-height:35px;
}
div.usercm ul li a{
  color:#666;padding:0 15px;display:block
}
div.usercm ul li a:hover{
  color:#fff;background:#73c9e5;border-radius: 5px
}
div.usercm ul li a i{
  margin-right:10px
}
.usercm a.disabled{
  color:#c8c8c8!important;cursor:not-allowed
}
.usercm a.disabled:hover{
  background-color:rgba(255,11,11,0)!important
}
div.usercm{
  background:#fff !important;
}

JavaScript

代码语言：javascript复制

//绑定页面相关事件
(function(a) {
  a.extend({
    mouseMoveShow: function(b) {
      var d = 0,
              c = 0,
              h = 0,
              k = 0,
              e = 0,
              f = 0;
      a(window).mousemove(function(g) {
        d = a(window).width();
        c = a(window).height();
        h = g.clientX;
        k = g.clientY;
        e = g.pageX;
        f = g.pageY;
        h   a(b).width() >= d && (e = e - a(b).width() - 5);
        k   a(b).height() >= c && (f = f - a(b).height() - 5);
        a("html").on({
          contextmenu: function(c) {
            3 == c.which && a(b).css({
              left: e,
              top: f
            }).show()
          },
          click: function() {
            a(b).hide()
          }
        })
      })
    },
    //禁用右键菜单
    disabledContextMenu: function() {
      window.oncontextmenu = function() {
        return !1
      }
    }
  })
})(jQuery);

function getSelect() {
  "" == (window.getSelection ? window.getSelection() : document.selection.createRange().text) ? layer.msg("请选择需要复制的内容！") : document.execCommand("Copy")
}
function baiduSearch() {
  var a = window.getSelection ? window.getSelection() : document.selection.createRange().text;
  "" == a ? layer.msg("请选择需要百度的内容！") : window.open("https://www.baidu.com/s?wd="   a)
}
function googleSearch() {
  var a = window.getSelection ? window.getSelection() : document.selection.createRange().text;
  "" == a ? layer.msg("请选择需要谷歌的内容！") : window.open("https://www.google.com/search?q="   a)
}
function  toRefresh(){
  window.location.reload()
}
$(function() {
  for (var a = navigator.userAgent, b = "Android;iPhone;SymbianOS;Windows Phone;iPad;iPod".split(";"), d = !0, c = 0; c < b.length; c  ) if (0 < a.indexOf(b[c])) {
    d = !1;
    break
  }
  d && ($.mouseMoveShow(".usercm"), $.disabledContextMenu())
});

javascript html google 百度

0 人点赞