查看“Widget:Christmas”的源代码

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

<head>
    <meta charset="UTF-8">
    <title>BWiki 装饰元素</title>
    <style>
        /* 重置默认样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* 固定元素的基础样式 */
        .bwiki-fixed-element {
            position: fixed;
            z-index: 1000;
            pointer-events: none;
            width: 300px;
            height: 300px;
            transition: transform 0.3s ease;
        }

        /* 图片包裹层基础样式 */
        .bwiki-image-wrapper {
            position: relative;
            width: 100%;
            height: 100%;
            overflow: visible;
        }

        /* 事件监听盒子 */
        .bwiki-event-box {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
            z-index: 1;
            pointer-events: auto;
        }

        [class*="bwiki-decor-l"] .bwiki-event-box {
            left: 0;
            width: calc(300px * var(--img-scale-left));
            height: calc(300px * var(--img-scale-left));
        }

        [class*="bwiki-decor-r"] .bwiki-event-box {
            right: 0;
            width: calc(300px * var(--img-scale-right));
            height: calc(300px * var(--img-scale-right));
        }

        /* 图片基础样式 */
        .bwiki-image-wrapper img {
            position: absolute;
            top: 50%;
            width: 300px;
            height: auto;
            object-fit: contain;
            pointer-events: none;
            transform: translateY(-50%) scale(var(--img-scale));
            will-change: transform;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        /* 左侧元素样式 */
        [class*="bwiki-decor-l"] { 
            left: 0;
            transform-origin: left center;
        }

        /* 右侧元素样式 */
        [class*="bwiki-decor-r"] {
            right: 0;
            transform-origin: right center;
        }

        /* 左侧元素图片样式 */
        [class*="bwiki-decor-l"] img { 
            left: 0;
            transform: translateY(-50%) scale(var(--img-scale-left));
            transform-origin: left center;
        }

        /* 右侧元素图片样式 */
        [class*="bwiki-decor-r"] img {
            right: 0;
            transform: translateY(-50%) scale(var(--img-scale-right));
            transform-origin: right center;
        }

        /* 左侧元素位置 */
        .bwiki-decor-l1, .bwiki-decor-r1 { top: 25%; }

        /* 左侧元素位置 */
        .bwiki-decor-l2, .bwiki-decor-r2 { top: 55%; }

        /* GIF图片样式 */
        [class*="bwiki-decor-l"] img[src$='.gif'] {
            transform: translateY(-50%) scale(var(--gif-scale-left)) !important;
        }

        [class*="bwiki-decor-r"] img[src$='.gif'] {
            transform: translateY(-50%) scale(var(--gif-scale-right)) !important;
        }

        /* 摇摆动画 */
        @keyframes decorSwing {
            0%, 100% { transform: rotate(0deg); }
            50% { transform: rotate(var(--swing-angle)); }
        }

        /* 动画应用 */
        [class*="bwiki-decor-l"]:not(.collapsed) {
            animation: decorSwing 3s ease-in-out infinite;
            --swing-angle: 8deg;
        }

        [class*="bwiki-decor-r"]:not(.collapsed) {
            animation: decorSwing 3s ease-in-out infinite;
            --swing-angle: -8deg;
        }

        /* 延迟动画 */
        .bwiki-decor-l2:not(.collapsed),
        .bwiki-decor-r2:not(.collapsed) {
            animation-delay: 1.5s;
        }

        /* 收起状态 */
        .collapsed[class*="bwiki-decor-l"] {
            transform: translateX(calc(-300px * var(--img-scale-left) + 15px));
            animation: none;
        }

        .collapsed[class*="bwiki-decor-r"] {
            transform: translateX(calc(300px * var(--img-scale-right) - 15px));
            animation: none;
        }

        /* 顶部元素 */
        .bwiki-decor-top {
            position: absolute;
            top: 50px;
            left: 0;
            width: 100%;
            height: 90px;
            background: url('https://patchwiki.biligame.com/images/lysk/4/4d/44gsngalmerwb4ly9u1p8k1ugk56lti.png') repeat-x;
            background-size: auto 100%;
        }

        /* 文本提示样式 */
        .bwiki-text-display {
            position: absolute;
            top: 30px;
            width: 150px;
            padding: 5px;
            color: #000;
            font-size: 14px;
            text-align: center;
            pointer-events: none;
            opacity: 0;
            transition: opacity 0.3s;
            border: 1px solid rgba(0, 0, 0, 0.281);
            border-radius: 5px;
            background: rgba(255, 255, 255, 0.9);
        }

        /* 左侧元素文本提示位置 */
        [class*="bwiki-decor-l"] .bwiki-text-display { left: 5px; }

        /* 右侧元素文本提示位置 */
        [class*="bwiki-decor-r"] .bwiki-text-display { right: 5px; }

        /* 响应式设计 */
        @media screen and (max-width: 768px) {
            #bwiki-christmas-decorations,
            .bwiki-decor-top {
                display: none !important;
            }
        }
    </style>
</head>

<body>
    <script>
        (function () {
            const CONFIG = {
                imgScaleLeft: 0.3,
                imgScaleRight: 0.26,
                gifScaleLeft: 0.4,
                gifScaleRight: 0.36,
                imgSrc: {
                    "decor-top": "https://patchwiki.biligame.com/images/lysk/4/4d/44gsngalmerwb4ly9u1p8k1ugk56lti.png",
                    "decor-l1": "https://patchwiki.biligame.com/images/lysk/f/f3/668zprg2flsb0yu1tc1bmqa75z636cl.png",
                    "decor-l2": "https://patchwiki.biligame.com/images/lysk/4/44/dhkblsq2qp0kenowtzu6bno738a5dsc.png",
                    "decor-r1": "https://patchwiki.biligame.com/images/lysk/b/b5/r9ntrgvio8yzh87hoj1zazgovoy3e4j.png",
                    "decor-r2": "https://patchwiki.biligame.com/images/lysk/6/6e/gaovwo7efyyelvq135t49180vd61xa0.png",
                    "decor-r1-gif": "https://patchwiki.biligame.com/images/lysk/b/bf/4l1tsul5o893z3vloeqhs4hbe5erzra.gif",
                    "decor-r2-gif": "https://patchwiki.biligame.com/images/lysk/d/d5/hdvzch4cqeypms1yf1t96azehxy4tzv.gif",
                    "decor-l1-gif": "https://patchwiki.biligame.com/images/lysk/5/50/lm53tzjisalq99lta46f3a2gnzvf651.gif",
                    "decor-l2-gif": "https://patchwiki.biligame.com/images/lysk/d/d6/mp3y9fj9puvhsyse6oorb263jat4r3b.gif"
                },
                contentText: {
                    "l1": ["圣诞快乐", "……喵。", "想把图片收回去的话，点一下", "有个说明书：ooc致歉"],
                    "l2": ["圣诞快乐", "喵哼。", "想收回去？点一下", "哦，制作者还留了个说明：ooc致歉"],
                    "r1": ["圣诞快乐", "喵？喵喵。", "使用说明……点一下可以把图片收回去", "还有个说明：ooc致歉"],
                    "r2": ["圣诞快乐", "喵~", "保镖小姐，点一下试试看？可以收回去", "制作者说明：ooc致歉——好强的求生欲"]
                }
            };

            function init() {
                if (window.innerWidth <= 768 || /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) return;

                // 清理现有元素
                ['#bwiki-christmas-decorations', '.bwiki-decor-top'].forEach(selector => {
                    document.querySelector(selector)?.remove();
                });

                // 创建装饰容器
                const container = document.createElement('div');
                container.id = 'bwiki-christmas-decorations';
                container.style.setProperty('--img-scale-left', CONFIG.imgScaleLeft);
                container.style.setProperty('--img-scale-right', CONFIG.imgScaleRight);
                container.style.setProperty('--gif-scale-left', CONFIG.gifScaleLeft);
                container.style.setProperty('--gif-scale-right', CONFIG.gifScaleRight);

                // 创建装饰元素
                ['l1', 'l2', 'r1', 'r2'].forEach(type => {
                    const div = document.createElement('div');
                    div.className = `bwiki-fixed-element bwiki-decor-${type}`;
                    div.innerHTML = `<div class="bwiki-image-wrapper">
                        <div class="bwiki-event-box"></div>
                        <img src="${CONFIG.imgSrc['decor-'+type]}" alt="圣诞装饰${type}">
                    </div>`;
                    container.appendChild(div);
                });

                // 状态管理
                let isCollapsed = false;
                const elements = container.children;

                // 事件处理
                function handleClick(e) {
                    isCollapsed = !isCollapsed;
                    Array.from(elements).forEach(el => {
                        el.classList.toggle('collapsed', isCollapsed);
                        const img = el.querySelector('img');
                        const type = el.classList[1].replace('bwiki-decor-', '');
                        img.src = CONFIG.imgSrc['decor-'+type];
                    });
                }

                function handleMouseEnter(e) {
                    const el = e.currentTarget.closest('.bwiki-fixed-element');
                    if (el.classList.contains('collapsed')) return;

                    const type = el.classList[1].replace('bwiki-decor-', '');
                    const img = el.querySelector('img');
                    img.src = CONFIG.imgSrc['decor-'+type+'-gif'];

                    const textDisplay = el.querySelector('.bwiki-text-display');
                    if (textDisplay) {
                        let index = 0;
                        textDisplay.textContent = CONFIG.contentText[type][index];
                        textDisplay.style.opacity = '1';
                        el._textTimer = setInterval(() => {
                            index = (index + 1) % CONFIG.contentText[type].length;
                            textDisplay.textContent = CONFIG.contentText[type][index];
                        }, 3000);
                    }
                }

                function handleMouseLeave(e) {
                    const el = e.currentTarget.closest('.bwiki-fixed-element');
                    const type = el.classList[1].replace('bwiki-decor-', '');
                    const img = el.querySelector('img');
                    img.src = CONFIG.imgSrc['decor-'+type];

                    const textDisplay = el.querySelector('.bwiki-text-display');
                    if (textDisplay) {
                        textDisplay.style.opacity = '0';
                        clearInterval(el._textTimer);
                    }
                }

                // 添加事件监听和文本显示
                Array.from(elements).forEach(el => {
                    const textDisplay = document.createElement('div');
                    textDisplay.className = 'bwiki-text-display';
                    el.appendChild(textDisplay);

                    const eventBox = el.querySelector('.bwiki-event-box');
                    eventBox.addEventListener('click', handleClick);
                    eventBox.addEventListener('mouseenter', handleMouseEnter);
                    eventBox.addEventListener('mouseleave', handleMouseLeave);
                });

                // 添加元素到页面
                document.body.appendChild(container);

                // 添加顶部装饰
                const top = document.createElement('div');
                top.className = 'bwiki-decor-top';
                const visibleBlock = document.querySelector('.visible-md-block.visible-lg-block');
                if (visibleBlock?.parentNode) {
                    if (window.getComputedStyle(visibleBlock.parentNode).position === 'static') {
                        visibleBlock.parentNode.style.position = 'relative';
                    }
                    visibleBlock.parentNode.insertBefore(top, visibleBlock.nextSibling);
                } else {
                    document.body.appendChild(top);
                }

                // 页面卸载时清理
                window.addEventListener('unload', () => {
                    Array.from(elements).forEach(el => {
                        clearInterval(el._textTimer);
                        el.remove();
                    });
                    container.remove();
                    top.remove();
                });
            }

            document.readyState === 'loading'
                ? document.addEventListener('DOMContentLoaded', init)
                : init();
        })();
    </script>
</body>

</html>