小球碰撞JS文档使用说明
本帖最后由 马黑黑 于 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)
先酱紫，欢迎讨论。
lz.move ? vid.play() : vid.pause();
这里有说明，太好了。。 小球在背景上显示，这个太神了。。手机看在贴子内部，电脑看在背景上。。 南无月 发表于 2024-4-15 20:32
小球在背景上显示，这个太神了。。手机看在贴子内部，电脑看在背景上。。
这只是需要对分辨率进行判断 有了黑黑的js封装，小辣椒直接就可以套用，不用去研究那些静态和动态效果了{:4_170:} 小辣椒 发表于 2024-4-15 20:58
有了黑黑的js封装，小辣椒直接就可以套用，不用去研究那些静态和动态效果了
好哒 南无月 发表于 2024-4-15 20:30
lz.move ? vid.play() : vid.pause();
这里有说明，太好了。。
{:4_190:} 马黑黑 发表于 2024-4-15 20:45
这只是需要对分辨率进行判断
智能粒子最可爱
马黑黑 发表于 2024-4-15 21:19
{:5_103:}不高兴 南无月 发表于 2024-4-15 21:32
不高兴
为啥 南无月 发表于 2024-4-15 21:31
智能粒子最可爱
{:4_172:} 马黑黑 发表于 2024-4-15 21:32
为啥
你生病了啊。 马黑黑 发表于 2024-4-15 21:33
聪明着呢，能对分辨率进行判断 南无月 发表于 2024-4-15 21:52
聪明着呢，能对分辨率进行判断
js有这个本事的 南无月 发表于 2024-4-15 21:51
你生病了啊。
额，差不多了 马黑黑 发表于 2024-4-15 21:54
js有这个本事的
感觉JS很强大啊。。。就是太难学了。。数理化英都要懂{:4_170:} 马黑黑 发表于 2024-4-15 21:54
额，差不多了
{:4_187:}快点好起来 南无月 发表于 2024-4-15 22:00
感觉JS很强大啊。。。就是太难学了。。数理化英都要懂
所以现在幼儿园都开英语了 南无月 发表于 2024-4-15 22:00
快点好起来
不急慢慢来 黑黑厉害，不但封装好了，还有使用说明。这个太好了{:4_199:}