小球碰撞JS文档使用说明

马黑黑 · 发表于 2024-4-15 18:37

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

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

x

本帖最后由马黑黑于 2024-4-15 18:44 编辑

文档地址： https://638183.freep.cn/638183/web/js/ball-lz.js

引用方法：在页面JS代码中加入——

var sF = document.createElement('script');
sF.charset = 'utf-8';
sF.src = 'https://638183.freep.cn/638183/web/js/ball-lz.js';
document.body.appendChild(sF);

并配置一下 lz 对象：

var lz = {papa: '#mydiv', total: 40, maxsize: 20, move: false};

其中 ——

papa 指明粒子的父元素，id标识需要带 # 号，class 类标识带 . 号，例如，papa: '.mybox'，如此，页面中 class="mybox" 的第一个元素将成为小球粒子的容器；

total 定义小球总数

maxsize 定义小球个体最大直径

move 定义小球移动开关，true/false 二选一，设置随意，它将由帖子的相关代码对之进行赋值设定

【注意】

ball-lz.js 仅封装小球粒子功能，它通过 lz.move 决定是否移动，lz.move 的赋值由页面或帖子动态完成，比如和 audio 标签的音频播放/暂停捆绑以实现诸多联动。例如，创建一个函数  mState():

let mState = () => {
      lz.move = !aud.paused;
      papa.style.setProperty('--state', ['paused','running'][+lz.move]);
      lz.move ? vid.play() : vid.pause();
}

上面代码 ——

mState() 函数依据 id="aud" 的音频控件的播放/暂停来决定布尔值是真还是假，当音频暂停它为假，反之为真，这样 ball-lz.js 就知道如何控制小球。

papa.style.setProperty(...) 这句，id="papa" 的元素设置一个CSS变量值 --state，直接依据 lz.move 变量；

下一句，id="vid" 的视频，也是依据 lz.move 决定播放暂停状态。

这就达成了诸多联动控制目标。

另外，ball-lz.js 不仅仅是做帖子用，如果需要，它可以是整个页面的动态背景，在页面空余的地方展现粒子运动。若此，需要将 papa 设为 'body' 便可，当然，可能还需要通过从速设置一些元素层级之类的属性，以便根据需要让粒子也可以在非空余的地方显现。以下是一个应用实例：

凤山舞曲 (52qingyin.cn)

先酱紫，欢迎讨论。