Skip to content

这是一个前端小插件,可以快速引入一个可控显示的灯笼挂饰,使用方便快捷、方便。

License

Notifications You must be signed in to change notification settings

SeaYJ/LanternJS

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

10 Commits
 
 
 
 
 
 

Repository files navigation

LanternJS

这是一个前端小插件,可以快速引入一个可控显示的灯笼挂饰,使用方便快捷、方便。

一、说明

这个插件使用非常方便,您只需要给一个wrapper标签,然后通过实例化Class Lantern为一个对象即可为网页添加喜庆小灯笼。下面是效果图: Snipaste_2023-01-21_09-08-02

二、使用

npm i lanternjs-seayj

或者

<script src="https://cdn.jsdelivr.net/npm/[email protected]/lantern.min.js"></script>

1)给一个wrapper标签

首先,你需要在页面任意地方添加如下代码:

<div id="lantern-wrapper" class="lantern-wrapper" no-select></div>

[must] id="lantern-wrapper"

这个id非常重要,如果没有我们将不知道代码需要插入在哪里。


[optional] no-select

在灯笼中会用到文字,而这些文字有可能会被用户选中,可能会影响用户体验,而这些已经被我们考虑到了。

您只需要在标签中添加no-select属性即可快速实现禁止选中效果,并且兼容多浏览器(不包括IE)。



2)实例化对象

你需要在合适的地方(在引入插件代码和wrapper标签代码之后的任意位置)实例化一个对象,就像下面这样:

let lantern = new Lantern('lantern-wrapper', {
    date: {
        from: '12-20',
        to: '1-21',
    },
    postion: {
        zIndex: '1',
        lanternTop: [10, 150, 150, 10],
        lanternRL: [0, 0, 0, 0],
    },
    content: '新年快乐',
});

或者这样(使用默认设置):

let lantern = new Lantern('lantern-wrapper', {});

[must] lantern-wrapper

这个参数是必须的,并且值为wrapper标签的id名称,用来帮助我们找到装内容的盒子。


[must] {}

这个参数是一个对象,如果你不想过多设置(全部使用默认设置),那么可以传一个空对象。注意,它可以为空但是必须要有! 如果你需要进行一些个性化设置,那么你将需要用到这个对象里面的一些属性。下面一一为您介绍:


[optional] date

可选参数

from

to

这个参数代表你需要展示的日期区间,我们将会在from给出的日期开始展示灯笼,并且在to给出的日期结束展示。

您需要做的就是给出格式为 月-日 的日期即可。您不用考虑闰年问题,也不用考虑每月天数不一样问题,更不要考虑跨年问题(我们允许from的时间大于to的时间,这表示从当前跨越到下一年的设置),您只需要按照每个月31天来处理即可,剩下的交给我们。

注意: 如果您只设置了from而不设置to,这并不代表一直展示。因为我们对于未给出的设置,通通默许为默认值(后面除特殊说明外均一致)


[optional] postion

可选参数

zIndex

lanternTop

lanternRL

我们提供常用的一些样式设置,你可以直接使用以避免新增CSS样式来覆盖他们。

首先是zIndex参数,这个用来设置整体的z-index样式,防止被覆盖,默认为9999

然后是lanternTop参数,这个参数代表灯笼距离顶部的距离,默认为[0, 0, 0, 0]。当然,你可以按照数组的方式从左往右给每一个灯笼设置不同的顶部距离,也可以直接给出一个数字或者字符串,例如:0'0'。我们会同时将这个值设置为四个灯笼的顶部距离。

最后是lanternRL参数,这个参数代表灯笼距离最近侧的距离,默认值为[10, 150, 150, 10]。简单说就是左侧灯笼距离左侧距离,右侧灯笼距离右侧距离。设置顺序还是按照从左往右依次设置。注意的是,这里必须采用数组的方式传值,给一个数字或者字符串是不被认可的。(这也好理解,不然灯笼就会挤到一块去了,不是吗?)


[optional] content

这个值顾名思义,就是添加一个你需要展示的内容。例如:content: '万事如意'。我们会选中前四个字符,同时对于未给出的值依旧采取默认值。



三、最后

如果有任何问题,欢迎提出issues。 如果可以的话,可以给个小小的star吗?这对我真的很重要🥰,谢谢了!

About

这是一个前端小插件,可以快速引入一个可控显示的灯笼挂饰,使用方便快捷、方便。

Resources

License

Stars

Watchers

Forks