js实现video视频上明暗右键弹出菜单效果代码-html代码-BFW代码库

代码语言：html

代码描述：js实现video视频上明暗右键弹出菜单效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        @import url("https://fonts.googleapis.com/css2?family=Inter&display=swap");
        * {
          box-sizing: border-box;
          font-family: "Inter", sans-serif;
        }
        
        html,
        body {
          width: 100%;
          height: 100%;
          overflow: hidden;
        }
        
        .video-bg {
          width: 100%;
          height: 100%;
          pointer-events: none;
        }
        .video-bg video {
          width: 100%;
          height: 100%;
          -o-object-fit: cover;
             object-fit: cover;
        }
        
        .target {
          width: 50%;
          height: 100%;
          position: absolute;
          top: 0;
          z-index: 1;
          display: flex;
          align-items: center;
          justify-content: center;
          color: rgba(255, 255, 255, 0.5);
          font-size: 2vw;
        }
        
        .target-light {
          left: 0;
        }
        
        .target-dark {
          right: 0;
        }
        
        body {
          width: 100%;
          height: 100%;
          background-color: #000;
          overflow: hidden;
        }
        
        .right-click {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          z-index: 2;
          pointer-events: none;
          padding: 2vw;
          border-radius: 1vw;
          font-size: 2.4vw;
          background-color: #fff;
        }
        
        /* Context Menu */
        .contextMenu {
          --menu-border: rgba(255, 255, 255, 0.08);
          --menu-bg: linear-gradient(
            45deg,
            rgba(10, 20, 28, 0.2) 0%,
            rgba(10, 20, 28, 0.7) 100%
          );
          --item-border: rgba(255, 255, 255, 0.1);
          --item-color: #fff;
          --item-bg-hover: rgba(255, 255, 255, 0.1);
          height: 0;
          overflow: hidden;
          background: var(--menu-bg);
          -webkit-backdrop-filter: blur(5px);
                  backdrop-filter: blur(5px);
          position: fixed;
          top: var(--top);
          left: var(--left);
          -webkit-animation: menuAnimation 0.4s 0s both;
                  animation: menuAnimation 0.4s 0s both;
          transform-origin: left;
          list-style: none;
          margin: 4px;
          padding: 0;
          display: flex;
          flex-direction: column;
          z-index: 999999999;
          box-shadow: 0 0 0 1px var(--menu-border), 0 2px 2px rgba(0, 0, 0, 0.03), 0 4px 4px rgba(0, 0, 0, 0.04), 0 10px 8px rgba(0, 0, 0, 0.05), 0 15px 15px rgba(0, 0, 0, 0.06), 0 30px 30px rgba(0, 0, 0, 0.07), 0 70px 65px rgba(0, 0, 0, 0.09);
        }
        .contextMenu-item {
          padding: 4px;
        }
        .contextMenu-item[data-divider=top] {
          border-top: 1px solid;
        }
        .contextMenu-item[data-divider=bottom] {
          border-bottom: 1px solid;
        }
        .contextMenu-item[data-divider=top-bottom] {
          border-top: 1px solid;
          border-bottom: 1px solid;
        }
        .contextMenu-item[data-divider] {
          border-color: var(--item-border);
        }
        .contextMenu-button {
          color: var(--item-color);
          background: 0;
          border: 0;
          white-space: nowrap;
          width: 100%;
          border-radius: 4px;
          padding: 6px 24px 6px 7px;
          text-align: left;
          display: flex;
          align-items: center;
          font-size: 14px;
          width: 100%;
          -webkit-animation: menuItemAnimation 0.2s 0s both;
                  animation: menuItemAnimation 0.2s 0s both;
          font-family: "Inter", sans-serif;
          cursor: pointer;
        }
        .contextMenu-button:hover {
          background-color: var(--item-bg-hover);
        }
        .contextMenu[data-theme=light] {
          --menu-bg: linear-gradient(
            45deg,
            rgba(255, 255, 255, 0.45) 0%,
            rgba(255, 255, 255, 0.85) 100%
          );
          --menu-border: rgba(0, 0, 0, 0.08);
          --item-border: rgba(0, 0, 0, 0.1);
          --item-color: rgb(10, 20, 28);
          --item-bg-hover: rgba(10, 20, 28, 0.09);
        }
        
        @-webkit-keyframes menuAnimation {
          0% {
            opacity: 0;
            transform: scale(0.5);
          }
          100% {
            height: var(--height);
            opacity: 1;
            border-radius: 8px;
            transform: scale(1);
          }
        }
        
        @keyframes menuAnimation {
          0% {
            opacity: 0;
            transform: scale(0.5);
          }
          100% {
            height: var(--height);
            opacity: 1;
            border-radius: 8px;
            transform: scale(1);
          }
        }
        @-webkit-keyframes menuItemAnimation {
          0% {
            opacity: 0;
            transform: translateX(-10px);
          }
          100% {
            opacity: 1;
            transform: translateX(0);
          }
        }
        @keyframes menuItemAnimation {
          0% {
            opacity: 0;
            transform: translateX(-10px);
          }
          100% {
            opacity: 1;
            transform: translateX(0);
          }
        }
    </style>



</head>

<body>
    <div class="video-bg">
        <video width="100%" height="100%" muted autoplay loop>
    <source src="//repo.bfw.wiki/bfwrepo/video/5d874438cd8d3.mp4" type="video/mp4">
  </video>
    </div>
    <div class="right-click">Right-click anywhere</div>
    <div class="target-light target">Light Menu</div>
    <div class="target-dark target">Dark Menu</div>

    <script>
        class ContextMenu {
          constructor({ target = null, menuItems = [], mode = "dark" }) {
            this.target = target;
            this.menuItems = menuItems;
            this.mode = mode;
            this.targetNode = this.getTargetNode();
            this.menuItemsNode = this.getMenuItemsNode();
            this.isOpened = false;
          }
        
          getTargetNode() {
            const nodes = document.querySelectorAll(this.target);
        
            if (nodes && nodes.length !== 0) {
              return nodes;
            } else {
              console.error(`getTargetNode :: "${this.target}" target not found`);
              return [];
            }
          }
        
          getMenuItemsNode() {
            const nodes = [];
        
            if (!this.menuItems) {
              console.error("getMenuItemsNode :: Please enter menu items");
              return [];
            }
        
            this.menuItems.forEach((data, index) => {
              const item = this.createItemMarkup(data);
              item.firstChild.setAttribute(
              "style",
              `animation-delay: ${index * 0.08}s`);
        
              nodes.push(item);
            });
        
            return nodes;
          }
        
          createItemMarkup(data) .........完整代码请登录后点击上方下载按钮下载查看