一、代码简介

在现代Web应用中，自定义右键菜单已成为提升用户体验的重要功能。传统的浏览器默认右键菜单无法满足特定场景的交互需求，因此可以根据项目要求设计具有统一视觉风格和定制功能的右键菜单。

PS：基于星空知新右键进行修改优化

二、示例截图

三、功能代码

1、HTML部分

<div class="usercm">
    <div class="quick-nav">
        <a href="javascript:;" id="menu-back" title="后退"><i class="fa fa-arrow-left"></i></a>
        <a href="javascript:;" id="menu-forward" title="前进"><i class="fa fa-arrow-right"></i></a>
        <a href="javascript:;" id="menu-top" title="返回顶部"><i class="fa fa-arrow-up"></i></a>
        <a href="javascript:;" id="menu-refresh" title="刷新页面"><i class="fa fa-refresh"></i></a>
    </div>
    <ul>
        <li><a href="javascript:;" id="menu-home" title="网站首页"><i class="fa fa-home"></i><span>网站首页</span></a></li>
        <li><a href="javascript:;" class="toggle-theme" title="深浅切换"><i class="fa fa-moon-o theme-icon moon"></i><span>切换深色</span></a></li>
        <li><a href="javascript:;" id="menu-friend-link" title="申请友链"><i class="fa fa-external-link"></i><span>申请友链</span></a></li>
        <li class="divider"></li>
        <li><a href="javascript:;" id="menu-search" title="搜索内容"><i class="fa fa-search"></i><span>搜索内容</span></a></li>
        <li><a href="javascript:;" id="menu-copy" title="复制内容"><i class="fa fa-copy"></i><span>复制内容</span></a></li>
        <li><a href="javascript:;" id="menu-copy-url" title="复制地址"><i class="fa fa-unlink"></i><span>复制地址</span></a></li>
        <li class="divider" id="urlDivider" style="display: none;"></li>
        <li><a href="javascript:;" id="menu-copy-link" title="复制链接地址" style="display: none;"><i class="fa fa-link"></i><span>复制链接</span></a></li>
        <li class="divider" id="imageDivider" style="display: none;"></li>
        <li><a href="javascript:;" id="menu-copy-image" title="复制图片链接" style="display: none;"><i class="fa fa-image"></i><span>复制图片</span></a></li>
        <li><a href="javascript:;" id="menu-paste" title="粘贴内容" style="display: none;"><i class="fa fa-paste"></i><span>粘贴内容</span></a></li>
    </ul>
</div>

2、CSS部分

:root {
    /* 主题色 */
    --theme-primary: rgba(255, 24, 86, 0.9);
    --theme-light: rgba(237, 100, 100, 0.3);
    --theme-border-dashed: rgba(229, 22, 44, 0.3);
    
    /* 基础主题 */
    --menu-bg: rgba(255, 255, 255, 0.7);
    --menu-text: #333;
    --menu-border: rgba(255, 255, 255, 0.8);
    --menu-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    --quick-nav-border: rgba(200, 200, 200, 0.7);
    --tooltip-success: linear-gradient(135deg, rgba(76, 175, 80, 0.8), rgba(66, 165, 70, 0.8));
    --tooltip-error: linear-gradient(135deg, rgba(244, 67, 54, 0.8), rgba(234, 57, 44, 0.8));
    --tooltip-bg: linear-gradient(135deg, #333, #222);
    --disabled-text: rgba(153, 153, 153, 0.6);
    --transition: all 0.3s ease;
}

/* 黑夜模式适配 */
body.dark-theme {
    --menu-bg: rgba(30, 30, 30, 0.7);
    --menu-text: #eee;
    --menu-border: rgba(60, 60, 60, 0.8);
    --menu-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    --quick-nav-border: rgba(80, 80, 80, 0.3);
    --tooltip-bg: linear-gradient(135deg, #1a1a1a, #0a0a0a);
    --disabled-text: rgba(120, 120, 120, 0.6);
}

/* 基础样式 */
a { text-decoration: none; color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }

/* 右键菜单容器 */
.usercm {
    background: var(--menu-bg);
    backdrop-filter: blur(15px) saturate(180%);
    -webkit-backdrop-filter: blur(15px) saturate(180%);
    font-size: 14px;
    width: 160px;
    box-shadow: var(--menu-shadow), 0 0 0 2px var(--theme-border-dashed);
    position: absolute;
    display: none;
    z-index: 99999;
    border-radius: 12px;
    border: 1px solid var(--menu-border);
    transition: var(--transition);
    opacity: 0;
    transform: translateY(5px);
}

.usercm.show {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.usercm:hover { box-shadow: var(--menu-shadow), 0 0 0 2px var(--theme-primary); }

/* 顶部导航 */
.quick-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px 10px;
    border-bottom: 1px solid var(--quick-nav-border);
    margin-bottom: 3px;
}

.quick-nav a {
    padding: 8px 12px;
    border-radius: 6px;
    transition: var(--transition);
    color: var(--menu-text);
    font-size: 15px;
    background: transparent;
}

.quick-nav a:hover {
    background: var(--theme-light);
    color: var(--theme-primary);
}

/* 菜单列表 */
.usercm ul { padding: 3px 0; }

.usercm li a {
    color: var(--menu-text);
    padding: 9px 20px;
    display: flex;
    align-items: center;
    transition: var(--transition);
    border-radius: 8px;
    margin: 3px 5px;
}

.usercm li a i {
    width: 20px;
    margin-right: 12px;
    text-align: center;
    transition: var(--transition);
    transform-origin: center;
    line-height: 1;
    font-size: 16px;
}

/* 图标切换动画 */
.usercm li a i.theme-icon {
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
    opacity: 1;
}

/* 图标的旋转角度 */
.usercm li a i.theme-icon.moon,
.usercm li a i.theme-icon.sun {
    transform: rotate(0deg);
}

/* 菜单列表鼠标选中颜色 */
.usercm li a:hover {
    background: var(--theme-light);
    color: var(--theme-primary);
}

.usercm li a:hover i { color: var(--theme-primary); }

/* 分隔线 */
.usercm li.divider {
    height: 1px;
    background: transparent;
    border-top: 1px dashed var(--theme-border-dashed);
    margin: 6px 15px;
    opacity: 0.8;
}

/* 禁用状态 */
a.disabled {
    color: var(--disabled-text) !important;
    cursor: not-allowed;
    background: transparent !important;
}

/* 提示框样式 */
.copy-tooltip {
    position: fixed;
    top: 20px;
    right: 20px;
    transform: translateX(120%);
    background: var(--tooltip-bg);
    color: #fff;
    padding: 12px 20px;
    border-radius: 10px;
    font-size: 16px;
    line-height: 1.5;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
    z-index: 100000;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

/* 提示框装饰元素 */
.copy-tooltip::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
}

.copy-tooltip.success::before { background-color: rgba(46, 125, 50, 0.6); }
.copy-tooltip.error::before { background-color: rgba(198, 40, 40, 0.6); }

.copy-tooltip i {
    margin-right: 10px;
    font-size: 18px;
    animation: i-pulse 1.2s infinite;
}

/* 成功和错误提示的样式差异 */
.copy-tooltip.success { background: var(--tooltip-success); }
.copy-tooltip.error { background: var(--tooltip-error); }

/* 显示状态的动画 */
.copy-tooltip.show {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

/* 提示图标脉动效果 */
@keyframes i-pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.15); }
    100% { transform: scale(1); }
}

/* 小屏幕适配 */
@media (max-width: 768px) {
    .copy-tooltip {
        top: auto;
        bottom: 20px;
        right: 20px;
        left: 20px;
        transform: translateY(120%);
        text-align: center;
        justify-content: center;
    }
    
    .copy-tooltip.show { transform: translateY(0); }
}

3、JavaScript部分

// 模块化封装右键菜单功能
const contextMenu = (function($) {
    // 私有变量
    let lastEditableElement = null;
    let scrollAnimationId = null;
    let isMenuShowing = false;
    let currentImageUrl = '';
    let currentLinkUrl = '';
    let clipboardContent = '';
    let windowWidth = $(window).width();
    let windowHeight = $(window).height();
    let tooltips = [];
    const TOOLTIP_SPACING = 10;
    const MENU_MARGIN = 15;
    
    // DOM元素缓存
    const $menu = $('.usercm');
    const $copyImageLink = $('#menu-copy-image');
    const $imageDivider = $('#imageDivider');
    const $copyUrlLink = $('#menu-copy-link');
    const $urlDivider = $('#urlDivider');
    const $pasteMenuItem = $('#menu-paste');
    const $themeToggle = $('.toggle-theme');
    const $themeIcon = $themeToggle.find('i');
    const $themeText = $themeToggle.find('span');

    // 初始化函数
    function init() {
        // 移动设备检测
        const userAgent = navigator.userAgent;
        const isMobileDevice = /Android|iPhone|iPad|iPod|Windows Phone/i.test(userAgent);
        if (isMobileDevice && window.innerWidth < 250) return;

        // 检查本地存储的主题偏好
        checkThemePreference();
        
        // 禁用默认右键菜单
        window.addEventListener('contextmenu', e => e.preventDefault(), { passive: false });

        // 绑定事件处理函数
        bindEvents();
        // 绑定菜单ID与对应函数
        bindMenuActions();
    }

    // 检查元素是否为可编辑区域
    function isEditableElement(element) {
        if (!element) return false;
        const tagName = element.tagName.toLowerCase();
        
        // 输入框/文本域：非禁用、非只读
        if ((tagName === 'input' || tagName === 'textarea')) {
            return !element.disabled && !element.readOnly;
        }
        
        // 可编辑元素（contenteditable）
        if (element.isContentEditable) {
            return element.contentEditable === 'true';
        }
        
        return false;
    }

    // 检查主题偏好
    function checkThemePreference() {
        const isDark = $('body').hasClass('dark-theme');
        const newTheme = isDark ? 'dark' : 'light';
        
        if (!newTheme) {
            const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
            setTheme(prefersDark ? 'dark' : 'light');
            return;
        }
        setTheme(newTheme);
    }

    // 设置深浅切换菜单图标文字
    function setTheme(theme) {
        // 先淡出当前图标
        $themeIcon.css('opacity', '0');
        
        // 短暂延迟后切换图标并淡入
        setTimeout(() => {
            if (theme === 'dark') {
                $themeIcon.removeClass('fa-moon-o moon').addClass('fa-sun-o sun');
                $themeText.text('切换浅色');
            } else {
                $themeIcon.removeClass('fa-sun-o sun').addClass('fa-moon-o moon');
                $themeText.text('切换深色');
            }
            // 淡入新图标
            $themeIcon.css('opacity', '1');
        }, 150);
    }

    // 切换主题提示框
    function toggleTheme() {
        const isDark = $('body').hasClass('dark-theme');
        const newTheme = isDark ? 'light' : 'dark';
        
        setTheme(newTheme);
        showTooltip(`已切换${newTheme === 'dark' ? '深色' : '浅色'}模式`, 'success');
    }

    // 事件绑定
    function bindEvents() {
        // 右键点击事件
        $(document).on('mousedown', handleMouseDown);
        
        // 滚动时隐藏菜单
        $(window).on('scroll', hideMenu);
        
        // 窗口大小改变时重新计算
        let resizeTimer = null;
        $(window).on('resize', () => {
            clearTimeout(resizeTimer);
            resizeTimer = setTimeout(() => {
                windowWidth = $(window).width();
                windowHeight = $(window).height();
                if (isMenuShowing) repositionMenu();
                repositionTooltips();
            }, 100);
        });
        
        // 绑定主题切换事件
        $themeToggle.on('click', function(e) {
            e.preventDefault();
            toggleTheme();
            hideMenu();  // 执行后隐藏菜单
        });
    }

    // 封装一个带 noreferrer 的打开窗口函数
    function openWithNoreferrer(url) {
        // 创建隐藏的 <a> 标签
        const link = document.createElement('a');
        link.href = url;
        link.target = '_blank';
        link.rel = 'noopener noreferrer';
        // 触发点击并移除元素
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
    }

    // 绑定菜单ID与对应函数
    function bindMenuActions() {
        // 使用对象映射ID与对应的处理函数
        const actionMap = {
            'menu-home': () => window.location.href = 'https://www.zibll.com',
            'menu-friend-link': () => openWithNoreferrer('https://www.zibll.com/friendship-links'),
            'menu-forward': () => history.go(1),
            'menu-back': () => history.go(-1),
            'menu-top': () => contextMenu.smoothScrollToTop(),
            'menu-copy': () => contextMenu.getSelect(),
            'menu-paste': () => contextMenu.pasteContent(),
            'menu-copy-url': () => contextMenu.copyPageUrl(),
            'menu-search': () => contextMenu.leafSearch(),
            'menu-refresh': () => location.reload(),
            'menu-copy-image': () => contextMenu.copyImageLink(),
            'menu-copy-link': () => contextMenu.copyUrlLink()
        };

        // 为每个菜单元素绑定点击事件
        Object.keys(actionMap).forEach(id => {
            $(`#${id}`).on('click', function(e) {
                e.preventDefault(); // 阻止a标签默认跳转行为
                actionMap[id]();    // 执行对应函数
                hideMenu();         // 执行后隐藏菜单
            });
        });
    }

    // 检查剪贴板内容
    async function checkClipboardContent() {
        try {
            // 检查是否有访问剪贴板的权限
            const permission = await navigator.permissions.query({ name: 'clipboard-read' });
            if (permission.state === 'denied') {
                clipboardContent = '';
                return false;
            }
            
            // 读取剪贴板内容
            clipboardContent = await navigator.clipboard.readText();
            return !!clipboardContent.trim();
        } catch (err) {
            console.error('无法访问剪贴板:', err);
            clipboardContent = '';
            return false;
        }
    }

    // 切换粘贴菜单项显示状态
    async function togglePasteMenuItem(isEditable) {
        const hasContent = await checkClipboardContent();
        // 只有当在可编辑区域且剪贴板有内容时才显示粘贴菜单
        $pasteMenuItem.toggle(isEditable && hasContent);
        return hasContent;
    }

    // 鼠标按下事件处理
    function handleMouseDown(e) {
        if (e.which === 3) {
            handleRightClick(e);
        } else if (e.which === 1 && !$(e.target).closest($menu).length) {
            hideMenu();
            toggleImageCopy(false);
            toggleUrlCopy(false);
            currentImageUrl = '';
            currentLinkUrl = '';
            lastEditableElement = null;
        }
    }

    // 右键点击处理
    async function handleRightClick(e) {
        const target = document.elementFromPoint(e.clientX, e.clientY);
        // 记录右键点击的元素是否为可编辑区域
        lastEditableElement = isEditableElement(target) ? target : null;
        const isEditable = !!lastEditableElement;

        // 检测是否点击在图片上
        const imgElement = target?.closest('img');
        let imgUrl = '';
        if (imgElement) {
            const src = imgElement.getAttribute('src');
            if (src && !src.startsWith('data:image')) {
                try { imgUrl = new URL(src, window.location.href).href; } 
                catch { imgUrl = src; }
            }
        }

        // 检测是否点击在链接上
        const linkElement = target?.closest('a[href]');
        let linkUrl = '';
        if (linkElement) {
            const href = linkElement.getAttribute('href');
            // 排除javascript链接
            if (href && !href.startsWith('javascript:')) {
                try { linkUrl = new URL(href, window.location.href).href; } 
                catch { linkUrl = href; }
            }
        }

        toggleImageCopy(!!imgUrl, imgUrl);
        toggleUrlCopy(!!linkUrl, linkUrl);
        // 检查剪贴板内容并根据是否在可编辑区域决定是否显示粘贴菜单项
        await togglePasteMenuItem(isEditable);
        positionMenu(e);
        showMenu();
    }

    // 菜单定位
    function positionMenu(e) {
        const menuWidth = $menu.outerWidth();
        const menuHeight = $menu.outerHeight();
        const scrollX = $(window).scrollLeft();
        const scrollY = $(window).scrollTop();
        
        let left = e.clientX + scrollX;
        let top = e.clientY + scrollY;

        // 边界调整
        const viewportLeft = scrollX + MENU_MARGIN;
        const viewportRight = scrollX + windowWidth - MENU_MARGIN - menuWidth;
        const viewportTop = scrollY + MENU_MARGIN;
        const viewportBottom = scrollY + windowHeight - MENU_MARGIN - menuHeight;

        left = Math.max(viewportLeft, Math.min(left, viewportRight));
        top = Math.max(viewportTop, Math.min(top, viewportBottom));

        $menu.css({ left, top });
    }

    // 重新定位菜单
    function repositionMenu() {
        const currentLeft = $menu.offset().left;
        const currentTop = $menu.offset().top;
        
        positionMenu({
            clientX: currentLeft - $(window).scrollLeft(),
            clientY: currentTop - $(window).scrollTop()
        });
    }

    // 显示/隐藏菜单
    function showMenu() {
        if (!isMenuShowing) {
            $menu.css('display', 'block');
            setTimeout(() => $menu.addClass('show'), 10);
            isMenuShowing = true;
        }
    }

    function hideMenu() {
        if (isMenuShowing) {
            $menu.removeClass('show');
            setTimeout(() => {
                $menu.css('display', 'none');
                isMenuShowing = false;
            }, 300);
        }
    }

    // 切换图片复制选项
    function toggleImageCopy(show, url = '') {
        currentImageUrl = url;
        $copyImageLink.toggle(show);
        $imageDivider.toggle(show);
    }

    // 切换链接复制选项
    function toggleUrlCopy(show, url = '') {
        currentLinkUrl = url;
        $copyUrlLink.toggle(show);
        $urlDivider.toggle(show);
    }

    // 平滑滚动到顶部
    function smoothScrollToTop() {
        if (window.pageYOffset < 10) return;
        if (scrollAnimationId) cancelAnimationFrame(scrollAnimationId);

        const start = window.pageYOffset;
        const startTime = performance.now();
        const duration = 600;
        const easeOutCubic = t => (--t) * t * t + 1;

        const handleUserScroll = () => {
            if (scrollAnimationId) {
                cancelAnimationFrame(scrollAnimationId);
                scrollAnimationId = null;
                window.removeEventListener('wheel', handleUserScroll, { passive: true });
                window.removeEventListener('touchmove', handleUserScroll, { passive: true });
            }
        };

        const animateScroll = currentTime => {
            const elapsed = currentTime - startTime;
            const progress = Math.min(elapsed / duration, 1);
            window.scrollTo(0, start * (1 - easeOutCubic(progress)));

            if (progress < 1) {
                scrollAnimationId = requestAnimationFrame(animateScroll);
            } else {
                scrollAnimationId = null;
                window.removeEventListener('wheel', handleUserScroll, { passive: true });
                window.removeEventListener('touchmove', handleUserScroll, { passive: true });
            }
        };

        window.addEventListener('wheel', handleUserScroll, { passive: true });
        window.addEventListener('touchmove', handleUserScroll, { passive: true });
        scrollAnimationId = requestAnimationFrame(animateScroll);
    }

    // 复制功能
    function copyTextToClipboard(text, successTip = '复制成功', type = 'success') {
        if (!text) {
            showTooltip('无内容可复制', 'error');
            return;
        }

        try {
            if (navigator.clipboard) {
                navigator.clipboard.writeText(text)
                    .then(() => showTooltip(successTip, type))
                    .catch(() => fallbackCopy(text, successTip, type));
            } else {
                fallbackCopy(text, successTip, type);
            }
        } catch (err) {
            showTooltip('复制失败，请重试', 'error');
            console.error('复制错误：', err);
        }
    }

    // 复制功能降级方案
    function fallbackCopy(text, successTip, type) {
        const tempInput = document.createElement('input');
        tempInput.style.cssText = 'position:absolute;left:-9999px';
        tempInput.value = text;
        document.body.appendChild(tempInput);
        tempInput.select();
        tempInput.setSelectionRange(0, text.length);
        
        try {
            const successful = document.execCommand('copy');
            showTooltip(successful ? successTip : '复制失败，请重试', successful ? type : 'error');
        } catch (err) {
            showTooltip('复制失败，请重试', 'error');
            console.error('Fallback copy error:', err);
        } finally {
            document.body.removeChild(tempInput);
        }
    }

    // 粘贴功能
    function pasteContent() {
        // 检查是否有可粘贴的内容
        if (!clipboardContent.trim()) {
            showTooltip('剪贴板中没有内容', 'error');
            return;
        }

        // 优先使用右键点击时记录的可编辑元素，其次检查当前激活元素
        const targetElement = lastEditableElement || document.activeElement;
        
        if (isEditableElement(targetElement)) {
            // 聚焦目标元素
            targetElement.focus();
            
            // 保存并恢复光标位置
            let startPos, endPos;
            const tagName = targetElement.tagName.toLowerCase();
            if (tagName === 'input' || tagName === 'textarea') {
                startPos = targetElement.selectionStart;
                endPos = targetElement.selectionEnd;
            }

            // 执行粘贴
            document.execCommand('insertText', false, clipboardContent);
            
            // 恢复光标位置到粘贴内容之后
            if (startPos !== undefined && endPos !== undefined) {
                targetElement.selectionStart = targetElement.selectionEnd = startPos + clipboardContent.length;
            }
            
            showTooltip('内容已粘贴', 'success');
        } else {
            showTooltip('请在输入框中使用粘贴功能', 'error');
        }
    }

    // 提示框管理
    function showTooltip(text, type = 'success') {
        const $tooltip = $('<div class="copy-tooltip"></div>');
        $tooltip.html(`<i class="fa fa-${type === 'error' ? 'exclamation-circle' : 'check-circle'}"></i>${text}`)
               .addClass(type);
        $('body').append($tooltip);
        
        const tooltipInfo = {
            element: $tooltip,
            timer: null,
            height: $tooltip.outerHeight() + TOOLTIP_SPACING
        };
        
        tooltips.unshift(tooltipInfo);
        repositionTooltips();
        
        void $tooltip[0].offsetWidth;
        setTimeout(() => $tooltip.addClass('show'), 50);
        
        tooltipInfo.timer = setTimeout(() => removeTooltip(tooltipInfo), 2500);
    }
    
    function repositionTooltips() {
        let offset = 0;
        const isMobile = window.innerWidth < 768;
        
        tooltips.forEach(tooltip => {
            const $tooltip = tooltip.element;
            $tooltip.css(isMobile ? 
                { bottom: `calc(20px + ${offset}px)`, top: 'auto' } : 
                { top: `calc(20px + ${offset}px)`, bottom: 'auto' });
            
            offset += tooltip.height;
        });
    }
    
    function removeTooltip(tooltipInfo) {
        const $tooltip = tooltipInfo.element;
        $tooltip.removeClass('show');
        
        setTimeout(() => {
            const index = tooltips.indexOf(tooltipInfo);
            if (index !== -1) {
                tooltips.splice(index, 1);
                repositionTooltips();
            }
            $tooltip.remove();
        }, 400);
    }

    // 公共方法
    function getSelect() {
        const text = window.getSelection?.().toString() || '';
        text ? copyTextToClipboard(text, '内容已复制', 'success') : showTooltip('请先选择内容', 'error');
    }

    function leafSearch() {
        const text = window.getSelection?.().toString() || '';
        if (!text) return showTooltip('请先选择搜索内容', 'error');
        openWithNoreferrer(`https://www.zibll.com/?s=${encodeURIComponent(text)}&type=post`);
        hideMenu();
    }

    function copyPageUrl() {
        copyTextToClipboard(window.location.href, '页面地址已复制', 'success');
    }

    function copyImageLink() {
        if (currentImageUrl) {
            copyTextToClipboard(currentImageUrl, '图片链接已复制', 'success');
            hideMenu();
        }
    }

    function copyUrlLink() {
        if (currentLinkUrl) {
            copyTextToClipboard(currentLinkUrl, '链接已复制', 'success');
            hideMenu();
        }
    }

    // 初始化并暴露公共方法
    init();
    return {
        smoothScrollToTop,
        getSelect,
        leafSearch,
        copyPageUrl,
        copyImageLink,
        copyUrlLink,
        pasteContent,
        hideMenu
    };
})(jQuery);

四、使用方法

<style type="text/css">
CSS代码
</style>

HTML代码

<script type="text/javascript">
JavaScript代码
</script>

子比主题后台自定义底部HTML代码自行添加即可，也可以把CSS代码和JS代码单独存放文件然后引入，但注意引入部位。

五、温馨提示

1、关联第三方库

菜单中图标需要font-awesome.min.css支持，JavaScript代码需要jquery.min.js支持。如果网页本身已经引用两文件便可忽略（子比主题可忽略），否则需自行引用，方法如下：

<!--放在HTML代码前方-->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css"/>

<!--放在JavaScript代码前方-->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js" type="text/javascript"></script>

2、菜单功能说明

• 代码中主题深浅色切换菜单功能仅适用于子比主题。
• 若为子比主题，菜单背景色随主题深浅色切换而改变。
• 粘贴功能需获取剪贴板权限，首次确认授权即可。
• 当剪贴板有内容时，右键点击可输入区域，粘贴内容功能便会显示。

3、最后的提示

JS代码中有三处URL需要修改成自己的，别又出现跳转到别人网站的尴尬情况咯！