前言

作者行业不与开发相关，仅保证代码可正常运行，不保证其美观性。

介绍

新春灯笼系统是一个轻量级的前端组件，用于在网页顶部显示带有动画效果的灯笼，营造节日氛围。该系统支持响应式设计，会在移动端自动隐藏，并且可以根据滚动位置自动显示/隐藏灯笼。

下图图例：

核心功能

节日氛围营造：通过红色灯笼和金色文字，为网站增添浓厚的中国传统节日氛围
动态效果：灯笼具有自然的摇摆动画，提升用户体验
响应式设计：在移动端设备上自动隐藏，避免影响移动用户浏览
智能显示/隐藏：当用户向下滚动页面时，灯笼会自动隐藏；当滚动到页面顶部时，灯笼会重新显示
高度可定制：支持修改灯笼文字、位置、大小、颜色等样式

轻量级实现：纯JavaScript实现，无需外部依赖，加载速度快
兼容性良好：支持所有现代浏览器，代码结构清晰易维护

技术特点

模块化设计：代码采用模块化结构，易于理解和扩展
性能优化：使用CSS动画而非JavaScript动画，减少性能消耗

事件防抖：滚动事件处理采用passive模式，提升滚动性能
DOM操作优化：动态创建DOM元素，避免静态HTML冗余
样式隔离：使用独立的样式标签，避免与现有样式冲突

配置步骤

安装方法

将以下代码保存为lantern.js 文件

<script>
(function () {
    const CONFIG = {
        SCROLL_THRESHOLD: 10,
        MOBILE_WIDTH: 768,
        LANTERN_TEXTS: ['马', '年', '大', '吉'],
        Z_INDEX: 999999
    };

    let lanternContainer = null;

    function isMobile() {
        return (
            window.innerWidth <= CONFIG.MOBILE_WIDTH ||
            /Android|iPhone|iPad|iPod|Mobile/i.test(navigator.userAgent)
        );
    }

    function createLanternElement(text) {
        const deng = document.createElement('div');
        deng.className = 'deng';

        deng.innerHTML = `
            <div class="xian"></div>
            <div class="deng-a">
                <div class="deng-b">
                    <div class="deng-t">${text}</div>
                </div>
            </div>
            <div class="shui shui-a">
                <div class="shui-c"></div>
                <div class="shui-b"></div>
            </div>
        `;

        return deng;
    }

    function createLanternContainer() {
        lanternContainer = document.createElement('div');
        lanternContainer.className = 'deng-container';

        CONFIG.LANTERN_TEXTS.forEach((text, index) => {
            const box = document.createElement('div');
            box.className = `deng-box deng-box${index + 1}`;

            const lantern = createLanternElement(text);
            box.appendChild(lantern);
            lanternContainer.appendChild(box);
        });

        document.body.appendChild(lanternContainer);
    }

    function injectLanternStyles() {
        if (document.getElementById('deng-style')) return;

        const style = document.createElement('style');
        style.id = 'deng-style';
        style.textContent = `
        .deng-container {
            position: relative;
            top: 10px;
            z-index: ${CONFIG.Z_INDEX};
            opacity: .95;
            pointer-events: none;
            transition: opacity .45s ease, transform .45s ease;
        }

        .deng-container.hide {
            opacity: 0;
            transform: translateY(-20px);
        }

        .deng-box { position: fixed; }

        .deng-box1 { top: 30px; left: 20px; }
        .deng-box2 { top: 27px; left: 130px; }
        .deng-box3 { top: 27px; right: 130px; }
        .deng-box4 { top: 30px; right: 20px; }

        .deng {
            width: 120px;
            height: 90px;
            background: rgba(216,0,15,.8);
            border-radius: 50%;
            animation: swing 3s infinite ease-in-out;
            box-shadow: -5px 5px 50px 4px #fa6c00;
            position: relative;
        }

        .xian {
            position: absolute;
            top: -20px;
            left: 60px;
            width: 2px;
            height: 20px;
            background: #dc8f03;
        }

        .deng-a {
            width: 100px;
            height: 90px;
            border: 2px solid #dc8f03;
            border-radius: 50%;
            margin-left: 7px;
            display: flex;
            justify-content: center;
        }

        .deng-b {
            width: 65px;
            height: 83px;
            border: 2px solid #dc8f03;
            border-radius: 60%;
        }

        .deng-t {
            font-family: '华文行楷', Arial, sans-serif;
            font-size: 3.2rem;
            color: #dc8f03;
            font-weight: 700;
            line-height: 85px;
            text-align: center;
            white-space: nowrap;
        }

        .shui-a {
            width: 5px;
            height: 20px;
            margin: -5px 0 0 59px;
            background: orange;
            animation: swing 4s infinite ease-in-out;
            transform-origin: 50% -45px;
        }

        .shui-b {
            width: 10px;
            height: 10px;
            background: #dc8f03;
            border-radius: 50%;
            position: absolute;
            top: 14px;
            left: -2px;
        }

        .shui-c {
            width: 10px;
            height: 35px;
            background: orange;
            position: absolute;
            top: 18px;
            left: -2px;
            border-radius: 0 0 0 5px;
        }

        @keyframes swing {
            0% { transform: rotate(-8deg); }
            50% { transform: rotate(8deg); }
            100% { transform: rotate(-8deg); }
        }`;
        document.head.appendChild(style);
    }

    function handleScroll() {
        if (!lanternContainer) return;
        const scrollTop = window.scrollY || document.documentElement.scrollTop;

        if (scrollTop <= CONFIG.SCROLL_THRESHOLD) {
            lanternContainer.classList.remove('hide');
        } else {
            lanternContainer.classList.add('hide');
        }
    }

    function initLanternSystem() {
        if (isMobile()) return;
        if (document.querySelector('.deng-container')) return;

        injectLanternStyles();
        createLanternContainer();
        handleScroll();

        window.addEventListener('scroll', handleScroll, { passive: true });
        window.addEventListener('resize', handleScroll);
    }

    function startLanternSystem() {
        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', initLanternSystem);
        } else {
            initLanternSystem();
        }
    }

    startLanternSystem();
})();
</script>

然后在博客中引入文件

<script src="path/to/lantern.js"></script>

修改灯笼文字

如果你想修改灯笼上的文字，只需要修改 LANTERN_TEXTS 数组：

const CONFIG = {
    // 其他配置...
    LANTERN_TEXTS: ['马', '年', '大', '吉'], // 修改为你想要的文字
    // 其他配置...
};

修改灯笼位置

如果你想调整灯笼的位置，可以修改CSS中的 .deng-box相关样式：

.deng-box1 { top: 30px; left: 20px; } /* 左上 */
.deng-box2 { top: 27px; left: 130px; } /* 左中 */
.deng-box3 { top: 27px; right: 130px; } /* 右中 */
.deng-box4 { top: 30px; right: 20px; } /* 右上 */

实现原理

核心功能

动态创建DOM元素：通过JavaScript动态创建灯笼的HTML结构

注入CSS样式：自动创建并注入样式标签，无需外部CSS文件
响应式设计：在移动端自动隐藏灯笼
滚动控制：根据滚动位置自动显示/隐藏灯笼
动画效果：使用CSS动画实现灯笼的摇摆效果

代码结构

代码结构解析

配置项定义：集中管理所有配置参数
移动端检测：判断是否为移动端设备
灯笼元素创建：生成单个灯笼的DOM结构
灯笼容器创建：创建包含多个灯笼的容器
样式注入：动态添加CSS样式
滚动事件处理：根据滚动位置控制灯笼显示/隐藏
初始化函数：初始化整个灯笼系统
启动函数：在DOM加载完成后启动系统

结尾

新春灯笼系统是一个简单易用的前端组件，可以为你的网站增添节日氛围。