200行JS代码为你的网页挂上红灯笼

知心宝贝
3,302 阅读3分钟

PK创意闹新春，我正在参加「春节创意投稿大赛」，详情请看：春节创意投稿大赛

一、前言

除夕夜，在门前挂上灯笼有鸿（红）运当头的吉祥寓意，逢年过节挂的灯笼上，基本都是吉祥的图案和祝福的吉祥话。

而灯笼的正红色是朱砂的颜色，而朱砂是风水上讲去邪挡煞效力极强的宝物，所以自古逢年过节，就有在大门上挂红色灯笼的传统。

二、效果展示

局部效果

5.gif

全局效果

6.gif

三、代码讲解

确定位置

我们平常挂灯笼一般是挂在大门的两侧，所以我们把灯笼的位置确定在网页的左侧和右侧，平时讲究好事成双，所以网页两侧的灯笼要对称，距离适中。

右侧的灯笼位置代码：

.spring_lantern__deng-box {//第一个盒子
position: fixed;//固定位置
top: -20px;//最顶端
right: -20px;//右侧
z-index: 99999;
}

左侧的灯笼位置代码：

.spring_lantern__deng-box1 {//第二个盒子
 position: fixed;//固定位置
 top: -10px;//顶端
 left: 10px;//左侧灯笼
 z-index: 99999;
}

绘制灯笼

灯笼文字，为了喜庆，改成两个福字。

文字样式const word = '福福'

.spring_lantern__deng-t {//对于灯笼上面的文字样式
 font-family: 华文行楷,华文楷体,Arial,Lucida Grande,Tahoma,sans-serif;
 font-size: 53px !important;
 color: ${colors.suiLight};
 font-weight: bold;
 line-height: 85px;
 text-align: center;
 user-select:none;
}

灯笼颜色样式：

const colors = {
    suiLight: '#dc8f03',
    suiDark: '#ffa500',
    deng_box_shadow: 'rgba(250, 108, 0, 1)',
    r1: 'rgba(216, 0, 15, 0.8)',
    r2: 'rgba(216, 0, 15, 0.1)',

附加一个清明恶搞灯笼，更改第21到29行的代码，使之重新启用。

喜迎清明，黑白分明
  const colors = {
    suiLight: '#ffffff',
    suiDark: '#9b9b9a',
    deng_box_shadow: 'rgb(74,74,74)',
    r1: 'rgba(16, 16, 16, 80%)',
    r2: 'rgba(16, 16, 16, 10%)',
  }

效果如下 可以在朋友的电脑上面装一个，哈哈。

7.png

动态效果

核心代码：

    if (isDown) {//如果灯笼在摇摆的过程中下降
      _spring_lantern_LightUpFlag = false
      box.style.display = 'block'
      box1.style.display = 'block'
    }
    if (isUp) {//如果灯笼在摇摆的过程中上升
      _spring_lantern_LightUpFlag = true
      box.style.display = 'none'
      box1.style.display = 'none'
    }
  }
  //就是灯笼上升和下降两个状态彼此交替出现，实现动态效果

四、添加脚本到网页

下载万能的油猴

上述代码都只是简单的介绍一下相关的一些代码，大家如果要想实现具体的效果只需要下载一个油猴插件就行，不需要额外再编写代码。

首先，点击下面的链接油猴

安装一个用户脚本管理器，就使用情况来说Google体验感不错：

4.png

安装脚本：因为脚本时JS写的，大家想要在自己的电脑网页上实现灯笼效果，需要将油猴中的脚本下载到脚本管理器中，再进行使用。大家可以在油猴插件中搜索灯笼脚本，或者点击下方链接进行安装。

链接：挂灯笼

安装使用

6.png

安装完成之后，过一会浏览网页时在网页的两侧就会出现两个红红的大灯笼，当你需要点击页面最上方的其它东西的时候，这个灯笼会消失，防止阻碍你的视野。

祝福

2022年，趁着钟声还未响，趁着鞭炮还未鸣，趁着春节还未至，趁着虎年刚开始，趁着人还未喝醉。先把我美好的祝愿送到你的手机，在这里祝愿大家虎年吉祥如意，合家欢乐。

avatar
文章
阅读
粉丝