查看“Widget:SpringFestival”的源代码

<includeonly><script>
    const img = {
        "denglong":"https://patchwiki.biligame.com/images/lysk/2/29/s4hu8y3grwk8fmiu33f657rpqhv29vv.gif",
        "fafa":"https://patchwiki.biligame.com/images/lysk/9/9b/43ndwviwafxr5dnl6sd41gzbxx1zvkt.png",
        "dropItem":["https://patchwiki.biligame.com/images/lysk/8/8a/9z8i595st2u099frzdehlbqv21h2y43.png","https://patchwiki.biligame.com/images/lysk/0/0e/1whmlmxeohnowsik3knjcf6czj2wy9w.png","https://patchwiki.biligame.com/images/lysk/1/1c/khq0epxm58vc801n9jge43qdybcxkfj.png"],
        "decoL":"https://patchwiki.biligame.com/images/lysk/3/36/3exz4gj8nuse68u76dg6x62h8rtsrd5.png",
        "decoR":"https://patchwiki.biligame.com/images/lysk/3/31/jc18m0boo1pdrr5lh0lxhuy1nginkcn.png"
        }
    const denglongSize = "100x100px";

    function createFlower(x, y, angle, imageSrc) {
        const flower = document.createElement('img');
        flower.src = imageSrc;
        
        // 随机大小（20-40px之间）
        const size = Math.random() * 10 + 10;
        const distance = Math.random() * 20 + 30;
        
        // 设置动画总时长（毫秒）增加到 1000ms
        const duration = 1000;
        
        // 添加随机旋转角度（180到540度之间，即0.5到1.5圈）
        const rotation = Math.random() * 360 + 180;
        
        flower.style.cssText = `
            position: fixed;
            left: ${x}px;
            top: ${y}px;
            max-width: ${size}px;
            max-height: ${size}px;
            width: auto;
            height: auto;
            transform: translate(-50%, -50%) rotate(0deg);
            pointer-events: none;
            z-index: 1000;
            opacity: 1;
            object-fit: contain;
        `;
        
        document.body.appendChild(flower);
        
        // 延迟一帧添加移动和旋转动画
        requestAnimationFrame(() => {
            flower.style.transition = `transform ${duration}ms ease-out`;
            flower.style.transform = `
                translate(
                    calc(-50% + ${Math.cos(angle * Math.PI / 180) * distance}px),
                    calc(-50% + ${Math.sin(angle * Math.PI / 180) * distance}px)
                )
                rotate(${rotation}deg)
            `;
        });

        // 在80%的时间后开始淡出
        setTimeout(() => {
            flower.style.transition = `opacity ${duration * 0.2}ms ease-out`;
            flower.style.opacity = '0';
        }, duration * 0.8);
        
        // 动画结束后移除元素
        setTimeout(() => {
            document.body.removeChild(flower);
        }, duration);
    }

    function initAddDom() {
        // 解析尺寸值（例如："40x50px" => [40, 50]）
        const [width, height] = denglongSize.toLowerCase().replace('px', '').split('x').map(Number);
        
        // 添加左右装饰图片
        ['left', 'right'].forEach(side => {
            const decoImg = document.createElement('img');
            decoImg.src = img[side === 'left' ? 'decoL' : 'decoR'];
            decoImg.style.cssText = `
                position: fixed;
                ${side}: 0;
                top: 0;
                width: 200px;
                height: auto;
                pointer-events: none;
                z-index: 9998;
            `;
            document.body.appendChild(decoImg);
        });

        // 左右两侧灯笼的位置配置
        const positions = [
            { side: 'left', offsets: [20, 80, 140] },  // 左侧3个灯笼的水平位置
            { side: 'right', offsets: [20, 80, 140] }  // 右侧3个灯笼的水平位置
        ];
        
        positions.forEach(({side, offsets}) => {
            offsets.forEach(leftOffset => {
                // 创建一个不可见的定位容器
                const container = document.createElement('div');
                container.style.cssText = `
                    position: fixed;
                    ${side === 'left' ? 'left' : 'right'}: ${leftOffset}px;
                    top: 0;
                    width: ${width}px;
                    height: ${height}px;
                    z-index: 9999;
                `;
                
                // 创建图片元素
                const imgElement = document.createElement('img');
                imgElement.src = img["denglong"];
                imgElement.style.cssText = `
                    width: 100%;
                    height: 100%;
                    object-fit: contain;
                    cursor: pointer;
                `;
                
                // 添加点击事件
                imgElement.addEventListener('click', () => {
                    // 获取图片的位置和尺寸信息
                    const rect = imgElement.getBoundingClientRect();
                    // 计算图片中心点
                    const centerX = rect.left + rect.width / 2;
                    const centerY = rect.top + rect.height / 2;
                    
                    // 添加更细腻的摇晃动画
                    imgElement.style.transformOrigin = 'top center';
                    imgElement.style.transition = 'transform 0.2s ease-in-out';
                    
                    // 定义摇晃序列：[角度, 延迟时间]
                    const swingSequence = [
                        [-8, 0],     // 开始向左摇
                        [8, 200],    // 向右摇
                        [-6, 400],   // 小幅向左
                        [6, 600],    // 小幅向右
                        [-4, 800],   // 更小幅向左
                        [4, 1000],   // 更小幅向右
                        [-2, 1200],  // 最小幅向左
                        [2, 1400],   // 最小幅向右
                        [0, 1600]    // 回到原位
                    ];
                    
                    // 执行摇晃序列
                    swingSequence.forEach(([rotation, delay]) => {
                        setTimeout(() => {
                            imgElement.style.transform = `rotate(${rotation}deg)`;
                        }, delay);
                    });
                    
                    // 在循环外随机选择一个图片
                    const randomIndex = Math.floor(Math.random() * img.dropItem.length);
                    const selectedImage = img.dropItem[randomIndex];
                    
                    // 创建6朵花，均匀分布在360度上
                    const flowerCount = 6;
                    const angleStep = 360 / flowerCount;
                    
                    for (let i = 0; i < flowerCount; i++) {
                        const angle = i * angleStep;
                        createFlower(centerX, centerY, angle, selectedImage);
                    }
                });
                
                // 将图片添加到容器中，再将容器添加到 body 中
                container.appendChild(imgElement);
                document.body.appendChild(container);
            });
        });
    }

    function checkDeviceSupport() {
        // 检查是否为移动设备
        const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
        // 检查屏幕宽度
        const isSmallScreen = window.innerWidth < 768;

        // 如果是移动设备或小屏幕，则不显示烟花
        return !isMobile && !isSmallScreen;
    }

    // 当页面加载完成时执行
    window.addEventListener('load', function () {
        if (checkDeviceSupport()) {
            initAddDom();
        }
    });
</script></includeonly><noinclude>{{#widget:springFestival}}</noinclude>