anheyu主页添加新春灯笼教程

无需修改主题源文件且代码经过适配

本人大学专业并不与开发相关，仅保证代码可正常运行，不保证其美观性

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

效果图

功能介绍

核心功能

节日氛围营造：通过红色灯笼和金色文字，为网站增添浓厚的中国传统节日氛围
动态效果：灯笼具有自然的摇摆动画，提升用户体验
响应式设计：在移动端设备上自动隐藏，避免影响移动用户浏览
智能显示/隐藏：当用户向下滚动页面时，灯笼会自动隐藏；当滚动到页面顶部时，灯笼会重新显示
高度可定制：支持修改灯笼文字、位置、大小、颜色等样式
轻量级实现：纯JavaScript实现，无需外部依赖，加载速度快
兼容性良好：支持所有现代浏览器，代码结构清晰易维护

技术特点

模块化设计：代码采用模块化结构，易于理解和扩展
性能优化：使用CSS动画而非JavaScript动画，减少性能消耗
事件防抖：滚动事件处理采用passive模式，提升滚动性能
DOM操作优化：动态创建DOM元素，避免静态HTML冗余
样式隔离：使用独立的样式标签，避免与现有样式冲突

安装方法

方法一：安和鱼博客系统适配

如果你使用的是安和鱼（AnHeYu）博客系统，可以将以下代码添加到后台侧边栏配置中：

配置步骤

登录安和鱼博客系统后台（通常为 你的域名/admin）
进入 系统管理 → 系统设置 → 外观配置 → 侧边栏
将以下代码添加到侧边栏配置中

html

<script>
  /* =========================
   *  灯笼系统 · 进阶完整版
   *  作者: 九戈戈
   *  参考: 张苹果博客
   * ========================= */
  (function () {
    /**
     * 配置项
     */
    const CONFIG = {
      SCROLL_THRESHOLD: 10, // 下滑多少像素隐藏
      MOBILE_WIDTH: 768,    // 判定为移动端的宽度
      LANTERN_TEXTS: ['马', '年', '大', '吉'], // 灯笼上的文字
      Z_INDEX: 999999       // 灯笼的层级
    };

    /**
     * 全局变量
     */
    let lanternContainer = null;

    /**
     * 判断是否为移动端
     * @returns {boolean} 是否为移动端
     */
    function isMobile() {
      return (
        window.innerWidth <= CONFIG.MOBILE_WIDTH ||
        /Android|iPhone|iPad|iPod|Mobile/i.test(navigator.userAgent)
      );
    }

    /**
     * 判断是否为首页
     * @returns {boolean} 是否为首页
     */
    function isHomePage() {
      const path = window.location.pathname;
      // 首页判断：路径为 / 或 /index.html 或为空
      return path === '/' || path === '' || path === '/index.html' || path.endsWith('/index.html');
    }

    /**
     * 创建灯笼元素
     * @param {string} text 灯笼上的文字
     * @returns {HTMLElement} 灯笼元素
     */
    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: 0.9;
            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: 15px; left: 20px; }
        .deng-box2 { top: 12px; left: 130px; }
        .deng-box3 { top: 12px; right: 130px; }
        .deng-box4 { top: 15px; right: 20px; }

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

        /* 灯笼顶部金色装饰条 */
        .deng:before {
            content: "";
            display: block;
            position: absolute;
            top: -7px;
            left: 29px;
            height: 12px;
            width: 60px;
            z-index: 999;
            border-radius: 5px;
            border: solid 1px #dc8f03;
            background: linear-gradient(to right, #dc8f03, orange, #dc8f03, orange, #dc8f03);
        }

        /* 灯笼底部金色装饰条 */
        .deng:after {
            content: "";
            display: block;
            position: absolute;
            bottom: -7px;
            left: 29px;
            height: 12px;
            width: 60px;
            border-radius: 5px;
            border: solid 1px #dc8f03;
            background: linear-gradient(to right, #dc8f03, orange, #dc8f03, orange, #dc8f03);
        }

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

        .deng-a {
            width: 100px;
            height: 90px;
            background: rgba(216, 0, 15, 0.1);
            border-radius: 50%;
            border: 2px solid #dc8f03;
            margin-left: 8px;
            display: flex;
            justify-content: center;
        }

        .deng-b {
            width: 65px;
            height: 83px;
            background: rgba(216, 0, 15, 0.1);
            border-radius: 60%;
            border: 2px solid #dc8f03;
        }

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

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

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

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

        @keyframes swing {
            0% { transform: rotate(-10deg); }
            50% { transform: rotate(10deg); }
            100% { transform: rotate(-10deg); }
        }
        `;
      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 (!isHomePage()) return;

      // 移动端直接终止
      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>

方法二：外部引入

将代码保存为 lantern.js 文件，然后在HTML中引入：

html

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

自定义配置

灯笼系统提供了以下配置项，你可以根据需要进行修改：

配置项说明

配置项	类型	默认值	说明
SCROLL_THRESHOLD	Number	10	下滑多少像素后隐藏灯笼
MOBILE_WIDTH	Number	768	判定为移动端的宽度阈值
LANTERN_TEXTS	Array	'马', '年', '大', '吉'	灯笼上的文字
Z_INDEX	Number	999999	灯笼的层级，确保显示在最上层

修改灯笼文字

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

javascript

const CONFIG = {
    // 其他配置...
    LANTERN_TEXTS: ['新', '春', '快', '乐'], // 修改为你想要的文字
    // 其他配置...
};

修改灯笼位置

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

css

.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加载完成后启动系统

注意事项

使用注意事项

兼容性：该系统使用了现代JavaScript语法，在IE浏览器上可能无法正常工作
性能：由于使用了CSS动画，在低配置设备上可能会影响性能
层级：灯笼的z-index设置为999999，确保显示在最上层，但可能会与其他元素的层级产生冲突
文字大小：灯笼上的文字大小固定，如需修改请调整CSS中的 .deng-t 样式
移动端：在宽度小于768px的设备上，灯笼会自动隐藏

常见问题

Q: 灯笼不显示怎么办？

A: 请检查以下几点：

确认代码是否正确复制到HTML文件中
确认当前设备不是移动端（宽度大于768px）
确认页面没有滚动（或滚动距离小于10px）
检查浏览器控制台是否有错误信息

Q: 如何修改灯笼的大小？

A: 可以修改CSS中的 .deng 样式的宽度和高度：

css

.deng {
    width: 120px; /* 修改宽度 */
    height: 90px; /* 修改高度 */
    /* 其他样式... */
}

Q: 如何修改灯笼的颜色？

A: 可以修改CSS中的颜色相关样式：

css

.deng {
    background: rgba(216,0,15,.8); /* 灯笼主体颜色 */
    /* 其他样式... */
}

.deng-a, .deng-b {
    border: 2px solid #dc8f03; /* 边框颜色 */
    /* 其他样式... */
}

.deng-t {
    color: #dc8f03; /* 文字颜色 */
    /* 其他样式... */
}

总结

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

✅ 轻量级，无需外部依赖
✅ 响应式设计，自动适配不同设备
✅ 动画效果，提升用户体验
✅ 可自定义，支持修改文字、位置等
✅ 性能优化，滚动时自动隐藏

希望这个教程对你有所帮助，祝你在新的一年里万事如意！

联系方式

如有问题或建议，欢迎在评论区交流或联系我：发送邮件

本教程基于anheyu-app主题开发，无需修改主题源文件且代码经过适配，测试版本为：1.6.10 其他博客系统可能需要适当调整。代码已优化，兼容大部分现代浏览器。