给网站pc端右键添加一个实现看图的特效，记得放置一个比较有吸引力的图哦

• 右键空白处触发特效，鼠标位置出现一个「圆形视窗」；
• 这个圆形视窗内显示整张背景图的对应区域（不是单独的小图），移动鼠标时，圆形视窗会「浏览」整张背景图的不同部分；
• 圆形视窗外完全显示网站原有内容，无任何遮挡。

/* 1. 全屏暗淡遮罩：圈外网站内容变暗 */
.rightclick-dim-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: none;          /* 默认隐藏 */
    pointer-events: none;   /* 不阻碍交互 */
    z-index: 99998;         /* 低于图片视窗，高于网站内容 */
    background: rgba(0, 0, 0, 0.6); /* 暗淡程度：0.6可调整（0=无暗淡，1=全黑） */
}

/* 2. 圆形图片视窗：承载整张背景图，悬浮在暗淡遮罩上方 */
.rightclick-img-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: none;          /* 默认隐藏 */
    pointer-events: none;   /* 不阻碍网站交互 */
    z-index: 99999;         /* 高于暗淡遮罩 */
    /* 你的图片链接 */
    background-image: url('https://这里是你的图片地址');
    background-size: cover; /* 图片铺满容器 */
    background-position: center;
    /* 圆形视窗：半径60px，跟随鼠标 */
    clip-path: circle(100px at var(--mouse-x) var(--mouse-y));
    -webkit-clip-path: circle(100px at var(--mouse-x) var(--mouse-y));
    /* 可选：圆形边框更醒目 */
    border: 2px solid rgba(255,255,255,0.8);
}

上面是css代码，放在自定义css中，或者放置在你的网站网页中，记得要把上面css中的图片更换成你要显示的

下面是实现特效的HTML和js脚本放置在支持自定义html代码中就可以，或者放置在页脚也行

<!-- 右键特效：暗淡遮罩 + 图片视窗 -->
<div class="rightclick-dim-mask"></div>
<div class="rightclick-img-container"></div>
<script>
// WP右键图片视窗特效（圈外暗淡，圈内浏览图片）
document.addEventListener('DOMContentLoaded', function() {
    // 获取两个容器：暗淡遮罩 + 图片视窗
    const dimMask = document.querySelector('.rightclick-dim-mask');
    const imgContainer = document.querySelector('.rightclick-img-container');
    if (!dimMask || !imgContainer) return;

    // 1. 监听右键事件：同步显示暗淡遮罩和图片视窗
    document.addEventListener('contextmenu', function(e) {
        // 排除条件：选中文字/可交互元素/WP特殊区域
        const selectedText = window.getSelection().toString().trim();
        const interactiveTags = ['INPUT', 'BUTTON', 'TEXTAREA', 'SELECT', 'A', 'IMG'];
        const isInteractive = interactiveTags.includes(e.target.tagName);
        const isWPExclude = e.target.closest('.wp-editor-area, #commentform, .nav-menu, .widget');

        if (selectedText || isInteractive || isWPExclude) {
            return; // 保留原生右键菜单
        } else {
            e.preventDefault(); // 取消原生右键菜单
            // 同步显示暗淡遮罩和图片视窗
            dimMask.style.display = 'block';
            imgContainer.style.display = 'block';
            updateViewPosition(e); // 初始化视窗位置
        }
    });

    // 2. 监听鼠标移动：更新圆形视窗位置+图片背景位置
    document.addEventListener('mousemove', function(e) {
        if (imgContainer.style.display === 'block') {
            updateViewPosition(e);
        }
    });

    // 3. 隐藏特效：同步隐藏暗淡遮罩和图片视窗
    function hideRightClickEffect() {
        dimMask.style.display = 'none';
        imgContainer.style.display = 'none';
    }
    document.addEventListener('click', hideRightClickEffect);
    document.addEventListener('wheel', hideRightClickEffect);
    document.addEventListener('keydown', (e) => {
        if (e.key === 'Escape') hideRightClickEffect();
    });

    // 核心：更新圆形视窗位置 + 图片背景位置
    function updateViewPosition(e) {
        const mouseX = e.clientX;
        const mouseY = e.clientY;
        // 设置圆形视窗位置
        imgContainer.style.setProperty('--mouse-x', mouseX + 'px');
        imgContainer.style.setProperty('--mouse-y', mouseY + 'px');
        // 计算图片背景位置（浏览整张图）
        const winWidth = window.innerWidth;
        const winHeight = window.innerHeight;
        const bgX = (mouseX / winWidth) * 100 + '%';
        const bgY = (mouseY / winHeight) * 100 + '%';
        imgContainer.style.backgroundPosition = bgX + ' ' + bgY;
    }
});
</script>