首页 > 编程语言 >给网站添加春节灯笼效果:引入即用,附源码!

给网站添加春节灯笼效果:引入即用,附源码!

时间:2024-11-01 16:22:20浏览次数:2  
标签:appendChild const 灯笼 源码 createElement document deng 即用 left

记得之前在别的网站上看到这个喜庆的春节灯笼效果,觉得非常吸引人。虽然网上有一些现成的API可以直接实现,比如这个春节灯笼API,但使用后我发现两个问题:一是手机端访问时灯笼没有自适应,二是灯笼上的“春节快乐”四个字不能自定义。

为了解决这些问题,我找到了这篇文章,并“借鉴”了其中的源代码,稍加修改后转换成JavaScript方式引入使用。下面有完整的JS代码。

原文可查看效果:张苹果博客灯笼效果

一,引入使用

距离春节还有不到90天,赶紧试试吧!将以下JS在您的页面直接引入即可。

   <!-- 将以下js放入您的页面即可。text为灯笼文字,默认:新年快乐 -->
   <script src="https://www.vae.zhangweicheng.xyz/web/denglong.js?text=好好学习"> </script>

二,完整JS代码

 // 张苹果博客:https://zhangpingguo.com/
 // 创建并添加元素
function createDengContainer() {
    const container = document.createElement('div');
    container.className = 'deng-container';

    // 从当前脚本的 URL 获取参数
    const scriptSrc = document.currentScript.src;
    const urlParams = new URLSearchParams(scriptSrc.split('?')[1]); // 获取 '?'
    const customText = urlParams.get('text'); // 获取参数名为'text'的值

    // 将获取的文本分割为字符数组,如果没有提供文本,则使用默认的“新年快乐”
    const texts = customText ? customText.split('') : ['新', '年', '快', '乐'];

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

        const deng = document.createElement('div');
        deng.className = 'deng';

        const xian = document.createElement('div');
        xian.className = 'xian';

        const dengA = document.createElement('div');
        dengA.className = 'deng-a';

        const dengB = document.createElement('div');
        dengB.className = 'deng-b';

        const dengT = document.createElement('div');
        dengT.className = 'deng-t';
        dengT.textContent = text;

        dengB.appendChild(dengT);
        dengA.appendChild(dengB);
        deng.appendChild(xian);
        deng.appendChild(dengA);

        const shuiA = document.createElement('div');
        shuiA.className = 'shui shui-a';

        const shuiC = document.createElement('div');
        shuiC.className = 'shui-c';
        const shuiB = document.createElement('div');
        shuiB.className = 'shui-b';

        shuiA.appendChild(shuiC);
        shuiA.appendChild(shuiB);
        deng.appendChild(shuiA);
        box.appendChild(deng);
        container.appendChild(box);
    });

    document.body.appendChild(container);
}

// 添加CSS样式
function addStyles() {
    const style = document.createElement('style');
    style.type = 'text/css';
    style.textContent = `
        .deng-container {
            position: relative;
            top: 10px;
            opacity: 0.9;
            z-index: 9999;
            pointer-events: none;
        }
        .deng-box {
            position: fixed;
            right: 10px;
        }
        .deng-box1 { position: fixed; top: 15px; left: 20px; }
        .deng-box2 { position: fixed; top: 12px; left: 130px; }
        .deng-box3 { position: fixed; top: 10px; right: 110px; }
        .deng {
            position: relative;
            width: 120px;
            height: 90px;
            background: rgba(216, 0, 15, .8);
            border-radius: 50% 50%;
            animation: swing 3s infinite ease-in-out;
            box-shadow: -5px 5px 50px 4px #fa6c00;
        }
        .deng-a { 
            width: 100px; 
            height: 90px; 
            background: rgba(216, 0, 15, .1); 
            border-radius: 50%;  
            border: 2px solid #dc8f03; 
            margin-left: 7px; 
            display: flex; 
            justify-content: center; 
        }
        .deng-b { 
            width: 65px; 
            height: 83px; 
            background: rgba(216, 0, 15, .1); 
            border-radius: 60%; 
            border: 2px solid #dc8f03; 
        }
        .xian { 
            position: absolute; 
            top: -20px; 
            left: 60px; 
            width: 2px; 
            height: 20px; 
            background: #dc8f03; 
        }
        .shui-a { 
            position: relative; 
            width: 5px; 
            height: 20px; 
            margin: -5px 0 0 59px; 
            animation: swing 4s infinite ease-in-out; 
            transform-origin: 50% -45px; 
            background: orange; 
            border-radius: 0 0 5px 5px; 
        }
        .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; 
        }
        .deng:before, .deng:after { 
            content: " "; 
            display: block; 
            position: absolute; 
            border-radius: 5px; 
            border: solid 1px #dc8f03; 
            background: linear-gradient(to right, #dc8f03, orange, #dc8f03, orange, #dc8f03); 
        }
        .deng:before { 
            top: -7px; left: 29px; height: 12px; width: 60px; z-index: 999; 
        }
        .deng:after { 
            bottom: -7px; left: 10px; height: 12px; width: 60px; margin-left: 20px; 
        }
        .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; 
        }
        @media (max-width: 768px) { 
            .deng-t { font-size: 2.5rem; }  
            .deng-box { transform: scale(0.5); top: -15px; }  
            .deng-box1 { left: -22%; }  
            .deng-box2 { left: 0px; }  
            .deng-box3 { right: 50px; }  
            .deng-box4 { right: -10px; }  
        }
        @keyframes swing { 
            0% { transform: rotate(-10deg); }  
            50% { transform: rotate(10deg); }  
            100% { transform: rotate(-10deg); }  
        }
    `;
    document.head.appendChild(style);
}

// 引入时调用
function init() {
    addStyles();
    createDengContainer();
}

// 调用初始化函数
init();

三,页面使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>春节灯笼</title>
</head>
<body>
    <!-- 引入js即可,text为灯笼文字,默认:新年快乐 -->
   <script src="./denglong.js?text=等着下班"> </script>
 </body></html>

四,效果图

标签:appendChild,const,灯笼,源码,createElement,document,deng,即用,left
From: https://www.cnblogs.com/zhangapple/p/18520514

相关文章

  • RTX5/FreeRTOS全家桶源码工程综合实战模板集成CANopen组件(2024-10-30)
    【前言】之前的视频教程分享了两期CANopen的专题,配套的例子都是基于裸机的,为了方便大家在OS下使用,本期视频带OS下的支持。CANopen协议栈专题,实战方式系统了解NMT,PDO,SDO,时间戳,同步报文,紧急报文等(2023-10-17)https://www.armbbs.cn/forum.php?mod=viewthread&tid=121438CANopen......
  • (附源码)基于WEB的家乡特色农商品仓库管理系统的设计与实现-计算机毕设 26145
    基于WEB的家乡特色农商品仓库管理系统的设计与实现摘 要本论文旨在设计和实现基于WEB和SSM(Spring+SpringMVC+MyBatis)的家乡特色农商品仓库管理系统,以提高农产品仓储管理效率和服务水平。论文首先分析了传统农仓库信息管理存在的问题和需求,包括信息化程度低、管理效率不......
  • 实干派!网易易盾增强版滑块验证码,全方位讲解识别思路(含源码)
    注意,本文只提供学习的思路,严禁违反法律以及破坏信息系统等行为,本文只提供思路如有侵犯,请联系作者下架某盾的增强版滑块已经上线很久了,最近心血来潮想看一下这个验证码是骡子是马,我也翻阅了很多市面上的教程,都对该验证码有一定的简介,部分还停留在理论层面,本文将从浅到深......
  • 数字人直播带货前景曝光!手把手教你获取高质量系统源码!
    随着数字人直播技术的应用频率不断升高,它所蕴含着的市场前景和收益潜力也开始逐渐显现,使得不少人都对它在带货方面的效果产生好奇,并纷纷开始打听起了与数字人直播带货前景以及操作方式相关的消息。其中,就数字人直播带货的前景来说,根据iiMediaResearch发布的《2024年中国虚拟......
  • 头部公司nfc碰一碰支付系统私有化部署实力曝光!手把手教你获得高质量源码!
    随着支付宝基于NFC技术的碰一碰支付方式上线,不少商业嗅觉灵敏的人都开始察觉到它背后所蕴含着的巨大市场前景和收益潜力,从而纷纷打听起了入局相关的事宜。在此背景下,作为两大入局方式之一的nfc碰一碰支付系统私有化部署也逐渐成为了人们所重点关注的对象。毕竟,相较于代理模式......
  • 【附源码+论文+ppt+部署教程】基于SpringBoot的网上订餐系统
    本系统(程序+源码+数据库+调试部署+开发环境)带文档lw万字以上,源码已上传。点击文末名片获取个性化定制服务  摘 要随着我国经济的飞速发展,人们的生活速度明显加快,在餐厅吃饭排队的情况到处可见,近年来由于新兴IT行业的空前发展,它与传统餐饮行业也进行了新旧的结合,......
  • ORB-SLAM2源码学习:ORBextractor.cc:IC_Angle 利用灰度质心法求解关键点方向角
    ORB特征点:特征点是由关键点和描述子两部分组成,关键点是指特征点在图像中的位置,描述子是用来描述关键点周围的像素信息。ORB关键点是在FAST关键点的基础上进行改进给像素增加了一个主方向,称为OrientedFAST。描述子在BRIEF的基础上加入了上述的方向信息,称为SteeredBRIEF。FAS......
  • (附源码)基于Spring Boot的英语学习网站的设计与实现-计算机毕设 28248
    基于SpringBoot的英语学习网站的设计与实现摘要在当今全球化的时代,英语已经成为了国际交流的通用语言。为了提高英语水平,越来越多的人选择在线学习英语。然而,传统的英语学习网站往往存在功能单一、交互性差、用户体验不佳等问题。为了解决这些问题,我们提出了基于SpringB......
  • 【开题报告+论文+源码】基于SSM的电子书库系统
    项目背景与意义随着互联网技术的快速发展和智能设备的普及,人们的阅读习惯正逐渐从传统的纸质书籍转向电子书籍。在线阅读以其便捷性、实时性和丰富性受到了广大读者的青睐。然而,现有的在线阅读平台在用户体验、资源管理和个性化推荐等方面仍存在一定的不足,无法满足读者日益增......
  • 【含文档+PPT+源码】基于Python校园跑腿管理系统设计与实现
    项目介绍本课程演示的是一款基于Python校园跑腿管理系统设计与实现,主要针对计算机相关专业的正在做毕设的学生与需要项目实战练习的Python学习者。1.包含:项目源码、项目文档、数据库脚本、软件工具等所有资料2.带你从零开始部署运行本套系统3.该项目附带的源码资料可作为......