H5粒子插件测试

马黑黑 · 发表于 2023-9-8 18:32

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2023-9-8 18:33 编辑

马黑黑 · 发表于 2023-9-8 18:38

本帖最后由马黑黑于 2023-9-8 20:29 编辑

插件加载和配置代码

<script>
let jf = document.createElement('script');
jf.src = 'https://638183.freep.cn/638183/web/lizi/h5lz_01.js';
document.body.appendChild(jf);
jf.onload = () => {
H5lz({
papa: '#mydiv',
total: 100,
size: {width: 15, height: 15},
shape: {background: '', borderRadius: ''},
maxTime: 24,
offset: {x: 0, y: 0},
ani: 'toBottom',
});
};
</script>

复制代码

代码解释

03-05行：加载插件到 body 中；

07-17行：插件文档加载后配置插件，其中——

H5lz({
/* 具体配置代码写在这里 */
});

具体配置在楼下解释

马黑黑 · 发表于 2023-9-8 18:38

本帖最后由马黑黑于 2023-9-8 21:23 编辑

【简介】

H5粒子插件，当前是 v01 版本。所谓H5，指 HTML5，插件使用 HTML 标签构建粒子，并通过 CSS @keyframes 驱动粒子运动。总体上，H5粒子插件基于 HTML5 + CSS3，JS方面遵循 ES6 标准。

ver01 版本代码不足一百行，文档未压缩体积不足3Kb，引用和下载地址：https://638183.freep.cn/638183/web/lizi/h5lz_01.js

【插件配置】

在本论坛，请按本帖二楼介绍的方法引用插件，这里仅详细说明插件的配置，共七个参数：

① papa

指定需要显示粒子的元素，值为字符串值（需要引号包裹值，下同），具体值为 id 或 class 表达法，例如：

<div id="mybox"></div>

则，papa 配置这么写：

papa: '#mybox',

而：

<div class="mybox"></div>

则，papa 这么配置：

papa: '.mybox',

注意，当使用 class 时，插件只作用于第一个 class=“xx" 的元素。

当 papa 参数未指定，插件将作用于 body，且当 body 的高度低于浏览器视口高度是，插件将对 body 做如下设置：其一，body 的高度为视口高度；其二，滚动条设置为 hidden。

② total

设置粒子总数，值为数值（不能用引号包裹值，下同）。缺省将由插件自行设置。由于使用关键帧驱动，粒子总数对资源的消耗不明显，可以根据需要大胆设置，但不应过分。

③ size

粒子尺寸，值为 Object 对象，需要花括号包裹个键值对（下同）。键值对共两组，健名分别是 width 和 height，分别指向粒子的宽、高，键值为数值，键值对之间用小角逗号隔开：

size: {width: 10, height: 10},

缺省则由插件自行配置。

④ shape

配置粒子形状，值为 Object 对象，共两个键值对，健名是 background 和 borderRadius（注意大小写）。其中，background 是粒子的背景设置，支持颜色表达、渐变背景、图片背景；borderRadius 对应 CSS的 border-radius 属性。键值均为字符串值。

⑤ maxTime

设置关键帧动画最高周期运行时长，对应的是 duration 属性，数值。设置此值，每一个粒子的一个运动周期都将在它的一半到它的本值之间选择一个数值。

⑥ offset

粒子运动偏移量配置，值为 Object 对象，两个子对象，x 指水平方向偏移量，作用于上、下运动的粒子；y 值垂直方向偏移量，作用于左、有运动的粒子。x、y 偏移量值为数值，支持正、负数。

偏移量对粒子运动的作用，表现在粒子朝东、南、西、北运动是或向上、向下、向左、向右偏移。

⑦ ani

指定动画方向，字符串值，可选四个值——

其一，自上而下：toBottom
其二，自下而上：toTop
其三，自左向右：toRight
其四，自右向左：toLeft

最后在强调一下：给参数赋值时，对象值要使用花括号 {} 将键值对群包裹起来，值为字符串要用小角引号 '' 或 "" 包裹起来，值为数值不要用引号、不要使用单位。

【粒子交互】

其实就是粒子的运动与暂停，它依赖于 CSS 变量 --state，该变量的 paused 和 running 值将使得例子暂停、运动。