1、代码实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
window.onload = function () {
  (function () {
    // 自定义右键菜单内容并插入到body最后一个节点前
    let dom = `
      <div id="rightMenuBars">
          <div class="rightMenu-group rightMenu-small">
              <div class="rightMenu-item">
                  <i class="fa fa-chevron-left" aria-hidden="true"></i>
              </div>
              <div class="rightMenu-item">
                  <i class="fa fa-chevron-right" aria-hidden="true"></i>
              </div>
              <div class="rightMenu-item">
                  <i class="fa fa-refresh" aria-hidden="true"></i>
              </div>
              <div class="rightMenu-item">
                  <i class="fa fa-chevron-up" aria-hidden="true"></i>
              </div>
          </div>
      </div>
      <div id="rightMenuLinks">
          <div class="rightMenu-group rightMenu-line">
              <a class="rightMenu-item">
                  <i class="fa fa-photo" aria-hidden="true"></i>
                  <span>蓝猫图床</span>
              </a>
              <a class="rightMenu-item">
                  <i class="fa fa-cloud" aria-hidden="true"></i>
                  <span>个人云盘</span>
              </a>
              <a class="rightMenu-item">
                  <i class="fa fa-book" aria-hidden="true"></i>
                  <span>书籍阅读</span>
              </a>
              <a class="rightMenu-item">
                  <i class="fa fa-external-link" aria-hidden="true"></i>
                  <span>接口文档</span>
              </a>
          </div>
      </div>
      `;
    let rightMenuDiv = document.createElement("div");
    rightMenuDiv.id = "rightMenu";
    let body = document.body;
    rightMenuDiv.innerHTML = dom;
    body.insertBefore(rightMenuDiv, body.lastChild);

    // 引入外部css文件
    let link = document.createElement("link");
    link.rel = "stylesheet";
    link.type = "text/css";
    link.href =
      "https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css";
    document.head.appendChild(link);

    /* 创建style标签并设置菜单样式 */
    let rightMenuStyle = document.createElement("style");
    rightMenuStyle.innerHTML =
      "#rightMenu{display:none;font-size:20px;position:fixed;padding:0 0.25rem;width:9rem;height:fit-content;top:10%;left:10%;background-color: rgb(calc(0 + 255 * 0.92), calc(150 + (255 - 150) * 0.92), calc(136 + (255 - 136) * 0.92));;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);transform:translateZ(0);color:#32325d;border-radius:12px;z-index:999;border:1px solid #e3e8f7;user-select:none;box-shadow:0 0 12px 4px rgba(0,0,0,0.05);transition:border 0.3s;font-weight:500;}#rightMenu:hover{border:1px solid #009688;box-shadow:0 8px 12px -3px #4259ef23;}#rightMenu .rightMenu-group{padding:0.35rem 0.3rem;transition:0.3s;}#rightMenu .rightMenu-line{border-top:1px dashed #4259ef23;}#rightMenu .rightMenu-group.rightMenu-small{display:flex;justify-content:space-between;}#rightMenu .rightMenu-group .rightMenu-item{border-radius:8px;transition:0.3s;}#rightMenu .rightMenu-line .rightMenu-item{margin:0.25rem 0;padding:0.25rem 0;}#rightMenu .rightMenu-group a{background-color:transparent;color:#32325d;text-decoration:none;transition:all 0.2s ease 0s;overflow-wrap:break-word;-webkit-user-drag:none;}#rightMenu .rightMenu-group.rightMenu-line .rightMenu-item{display:flex;}#rightMenu .rightMenu-group .rightMenu-item:hover{cursor: pointer !important;background-color:#009688;color:#fff;box-shadow:0 8px 12px -3px #4259ef23;}#rightMenu .rightMenu-group .rightMenu-item i{display:inline-block;text-align:center;line-height:1.5rem;width:1.5rem;padding:0 0.25rem;font-size:18px;color:#32325d;}#rightMenu .rightMenu-line .rightMenu-item i{margin:0 0.25rem;}#rightMenu .rightMenu-group .rightMenu-item span{line-height:1.5rem;}.rightMenu-small .rightMenu-item{width:30px;height:30px;line-height:30px;display:flex;align-items:center;justify-content:center;}";
    document.getElementsByTagName("head").item(0).appendChild(rightMenuStyle);
  })();

  // 如果菜单已经存在
  let rightMenu = document.getElementById("rightMenu");
  if (rightMenu) {
    // 定义菜单显示与隐藏的方法
    let rm = {};
    rm.showRightMenu = function (e, t = 0, l = 0) {
      let o = rightMenu;
      o.style.cssText = `top: ${t}px; left: ${l}px`;
      e ? (o.style.display = "block") : (o.style.display = "none");
    };
    rm.hideRightMenu = function () {
      rm.showRightMenu(!1);
    };
    let rmWidth = parseInt(rightMenu.style.width);
    let rmHeight = parseInt(rightMenu.style.height);

    // 定义键盘事件（主要用于屏蔽鼠标右键以及禁止打开开发者工具）
    document.onkeydown = () => {
      let e = window.event || arguments[0];
      //屏蔽F12
      if (e.keyCode == 123) {
        return false;
        //屏蔽Ctrl+Shift+I
      } else if (e.ctrlKey && e.shiftKey && e.keyCode == 73) {
        return false;
        //屏蔽Shift+F10
      } else if (e.shiftKey && e.keyCode == 121) {
        return false;
      }
    };

    // 鼠标右键按下的事件
    window.oncontextmenu = function (e) {
      // 阻止默认行为
      e.preventDefault();
      e = e || window.event;
      // 当可视宽度 > 768时显示菜单
      if (document.body.clientWidth > 768) {
        let t = e.clientY;
        let l = e.clientX + 10;
        return (
          (rmWidth = rmWidth || 155),
          (rmHeight = rmHeight || 255),
          l + rmWidth > window.innerWidth && (l -= rmWidth + 10),
          t + rmHeight > window.innerHeight &&
            (t -= t + rmHeight - window.innerHeight),
          rm.showRightMenu(!0, t, l),
          !1
        );
      }
    };

    // 鼠标按下事件（点击除去菜单的其它区域）
    document.addEventListener("click", (e) => {
      // 如果当前元素或祖先元素中存在rightMenu，则隐藏
      if (!e.target.closest("#rightMenu")) {
        rightMenu.style.display = "none";
      }
    });

    // 点击菜单操作栏图标的事件
    document.getElementById("rightMenuBars").addEventListener("click", (e) => {
      const inner = e.target?.className;
      switch (inner) {
        case "fa fa-chevron-left":
          // 向后
          history.back();
          break;
        case "fa fa-chevron-right":
          // 向前
          history.forward();
          break;
        case "fa fa-refresh":
          // 刷新
          window.location.reload();
          break;
        case "fa fa-chevron-up":
          // 回到顶部
          // 获取点击时的scrollTop值
          let scrollTop = document.documentElement.scrollTop - 0;
          let t = setInterval(function () {
            // 缓动动画，每次走剩余距离的一半
            scrollTop = scrollTop / 2;
            // 定义临界值
            if (scrollTop <= 5) {
              clearInterval(t);
              scrollTop = 0;
            }
            document.documentElement.scrollTop = scrollTop + 0;
          }, 16.666);
          break;
      }
      rm.hideRightMenu();
    });

    // 点击菜单显示栏文字事件
    document.getElementById("rightMenuLinks").addEventListener("click", (e) => {
      const tag = e.target?.tagName?.toLowerCase();
      const inner = e.target?.innerText;
      if (tag === "a" || tag === "span" || tag === "i") {
        rm.hideRightMenu();
      }
      switch (inner) {
        case "蓝猫图床":
          window.open("https://bluecat.likepoems.com");
          break;
        case "个人云盘":
          window.open("https://pan.likepoems.com");
          break;
        case "接口文档":
          window.open("https://api.likepoems.com/");
          break;
        case "书籍阅读":
          window.open("https://reader.likepoems.com/");
          break;
      }
    });
  }
};

2、效果演示

博客右键菜单js实现