美丽世界（粒子模块使用帖子子元素做容器演示）

马黑黑

马黑黑

<style>
	@import 'https://638183.freep.cn/638183/web/mod/mp3player_lrc_v1.css?v=1.0';
	#tz { margin: 30px 0 30px calc(50% - 513px); background: url('https://638183.freep.cn/638183/t24/5/mluj.jpg') no-repeat center/cover; }
	#mplayer { width: 640px; bottom: 10px; background: none; box-shadow: none; color: snow; }
	#mplayer img { filter: invert(.8); }
	#fsbtn { top: 20px; border-color: snow; color: snow; }
	#lizi { width: 400px; height: 400px; }
</style>

<div id="tz" class="pa">
	<audio src="https://music.163.com/song/media/outer/url?id=1387419978"></audio>
	<video class="vid" src="https://bpic.588ku.com/video_listen/588ku_video/24/09/29/17/41/15/video66f920bb1a835.mp4" autoplay loop muted></video>
	<div id="lizi"></div>
</div>

<script type="module">
	import { hcplay } from 'https://638183.freep.cn/638183/web/mod/mp3player_lrc_v1.js?v=1.0';
	import { lz } from 'https://638183.freep.cn/638183/web/lizi/canvasparticles.js';
	hcplay(tz);
	lz(lizi, { total: 30, color: '#e29272' });
	tz.onclick = () => lizi.click();
</script>

马黑黑

建立一个帖子的子元素div用以装载粒子，在CSS设置尺寸、位置等（例如：#lizi {}），HTML中有该元素（例如：<div id="lizi"></div），然后在JS代码中将帖子元素的点击事件绑定到粒子容器的点击事件（代码21行）

这是因为，粒子模块设置了粒子容器的点击事件，通过它来传送音频播放暂停的信息，关联帖子容器和粒子容器的点击事件之后，模块就能正常做交互工作，与音频联动。

花飞飞

加了一个400*400的范围给它，还是碰边即回。
联动后一键可以全停，这个看上去更先进
你编辑器试贴 里用的是#lzwrap { width: 400px; height: 400px; }作用一样

马黑黑

花飞飞 发表于 2025-3-6 21:22
加了一个400*400的范围给它，还是碰边即回。
联动后一键可以全停，这个看上去更先进
你编辑器试 ...

容器名称可以按需要命名，引用的时候前后一致即可。这些不是定死的。

红影

马黑黑 发表于 2025-3-6 21:23
容器名称可以按需要命名，引用的时候前后一致即可。这些不是定死的。

是的，我帖子里用了#xiaoqiu ，昨天没弄出来暂停，今天看到你那个帖子就已经弄出来了，这个出来就更清楚了

红影

这粒子颜色取得漂亮，跟视频很相配，真像小号的果子似的

小辣椒

这个视频配的真好

花飞飞

马黑黑 发表于 2025-3-6 21:23
容器名称可以按需要命名，引用的时候前后一致即可。这些不是定死的。

之前做小白作业的时候知道的，碰上两个贴子在同一页打架，其中一个改个名字就好了。。
既然粒子显示有形状，那可以放到任意地方最好，比如根据需要偏 左或者偏右我加了LEFT:20%;无效~

杨帆

漂亮！谢谢马老师精彩分享

马黑黑

杨帆 发表于 2025-3-6 22:59
漂亮！谢谢马老师精彩分享

马黑黑

花飞飞 发表于 2025-3-6 22:04
之前做小白作业的时候知道的，碰上两个贴子在同一页打架，其中一个改个名字就好了。。
既然粒 ...

用CSS设置一下 position 然后好定位

花飞飞

马黑黑 发表于 2025-3-6 23:46
用CSS设置一下 position 然后好定位

好哒，实践一下再汇报哈

马黑黑

花飞飞 发表于 2025-3-7 18:28
好哒，实践一下再汇报哈

俺又不是领导

花飞飞

马黑黑 发表于 2025-3-7 19:31
俺又不是领导

你不是领导，你是顶梁柱

马黑黑

花飞飞 发表于 2025-3-7 19:34
你不是领导，你是顶梁柱

嘘——，两会正在开着

花飞飞

马黑黑 发表于 2025-3-7 19:43
嘘——，两会正在开着

我左右看看有没有敌情

马黑黑

花飞飞 发表于 2025-3-7 20:41
我左右看看有没有敌情

花飞飞

马黑黑 发表于 2025-3-7 21:48

两会热火朝天中。。

马黑黑

花飞飞 发表于 2025-3-8 20:00
两会热火朝天中。。

那必须的