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

一、前言

二、效果展示

局部效果

全局效果

三、代码讲解

1.确定位置

2.绘制灯笼

3.动态效果

四、添加脚本到网页

1.下载万能的油猴

2.安装使用

3.附录

一、前言

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

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

二、效果展示

局部效果

全局效果

三、代码讲解

1.确定位置

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

右侧的灯笼位置：

.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;
}

2.绘制灯笼

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

文字样式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%)',}

效果图：

3.动态效果

核心代码：

    if (isDown) {//如果灯笼在摇摆的过程中下降_spring_lantern_LightUpFlag = falsebox.style.display = 'block'box1.style.display = 'block'}if (isUp) {//如果灯笼在摇摆的过程中上升_spring_lantern_LightUpFlag = truebox.style.display = 'none'box1.style.display = 'none'}}

四、添加脚本到网页

1.下载万能的油猴

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

点击链接油猴

安装用户脚本管理器：

安装脚本：大家想要在自己的电脑网页上实现灯笼效果，需要将油猴中的脚本下载到脚本管理器中，进行使用。

链接1：挂灯笼

链接2：恶搞版

2.安装使用

3.附录

零基础必看的Html5+Css3+移动端前端教程（一）

零基础必看的Html5+Css3+移动端前端教程(二)

零基础必看的Html5+Css3+移动端前端教程(三)

零基础必看的Html5+Css3+移动端前端教程(四)

零基础必看的Html5+Css3+移动端前端教程(五)

100行Html5+CSS3+JS代码实现元旦倒计时界面

200行Html5+CSS3+JS代码实现动态圣诞树

明天和后天分别是北方和南方小年了，大家小年怎么过呀。

获取更多有趣的项目资源，欢迎大家关注文章下面的公众号。

200行JS代码为你的网页挂上红灯笼相关推荐

登顶 GitHub 趋势榜，标星1.8k：200 行 JS 代码让画面人物瞬间消失！
整理 | 夕颜出品 | CSDN(ID:CSDNnews) 今天,一个名为 Real-Time-Person-Removal(实时人物去除)项目在GitHub上火了,登上近日GitHub Trend ...
隐身术？登顶 GitHub Top1：200 行 JS 代码让画面人物瞬间消失！
整理 | 夕颜出品 | CSDN(ID:CSDNnews) 今天,一个名为 Real-Time-Person-Removal(实时人物去除)项目在GitHub上火了,登上近日GitHub Trend ...
java实现语法分析器_200 行 JS 代码,带你实现代码编译器
一.前言对于前端同学来说,编译器可能适合神奇的魔盒 ,表面普通,但常常给我们惊喜. 编译器,顾名思义,用来编译,编译什么呢?当然是编译代码咯 . 其实我们也经常接触到编译器的使用场景: React ...
站长常用的200个js代码
站长常用的200个js代码 1.文本框焦点问题 onBlur:当失去输入焦点后产生该事件 onFocus:当输入获得焦点后,产生该文件 Onchange:当文字值改变时,产生该事件 Onselect: ...
详解200行Python代码实现控制台版2048【总有一款坑适合你】【超详细】
跟着实验楼学习了2048的Python实现,先丢个地址 200行Python代码实现2048 我接触Python时间不长,只了解一些基本的语法和容器,在学习的过程中遇到不少问题,这里做一个记录. cu ...
Python实战2 - 200行Python代码实现2048（控制台）
Python实战系列用于记录实战项目中的思路,代码实现,出现的问题与解决方案以及可行的改进方向本文为第2篇–200行Python代码实现2048 一.分析与函数设计 1.1 游戏玩法 2048这款游 ...
只要200行JavaScript代码，就能把特斯拉汽车带到您身边
Jerry的前一篇文章如何使用JavaScript开发AR(增强现实)移动应用 (一) 介绍了用React-Native + ViroReact开发增强现实应用的一些预备知识. 本文咱们开始进入增强 ...
php公告滚动源码,10行js代码实现上下滚动公告效果方法
本文主要给大家介绍了关于利用10行js代码实现滚动公告效果的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起看看吧.希望能帮助到大家 ...
用200行Go代码写一个自己的区块链！
区块链是目前最热门的话题,广大读者都听说过比特币,或许还有智能合约,相信大家都非常想了解这一切是如何工作的.这篇文章就是帮助你使用 Go 语言来实现一个简单的区块链,用不到 200 行代码来揭示区块链 ...

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

一、前言

二、效果展示

局部效果

全局效果

三、代码讲解

1.确定位置

2.绘制灯笼

3.动态效果

四、添加脚本到网页

1.下载万能的油猴

2.安装使用

3.附录

200行JS代码为你的网页挂上红灯笼相关推荐

最新文章

热门文章