马黑黑 发表于 2025-3-6 21:07

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

<style>
        @import 'https://638183.freep.cn/638183/web/mod/mp3player_lrc_v1.css?v=1.0';
        #tz { margin: 30px 0 30px calc(50% - 593px); 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>

马黑黑 发表于 2025-3-6 21:08

<div id="hEdiv"><pre id="hEpre">
&lt;style&gt;
        @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; }
&lt;/style&gt;

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

&lt;script type="module"&gt;
        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 = () =&gt; lizi.click();
&lt;/script&gt;
</pre></div>

<script type="module">
import hlight from 'https://638183.freep.cn/638183/web/helight/helight1.js';
hlight.hl(hEdiv, hEpre);
</script>

马黑黑 发表于 2025-3-6 21:13

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

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

花飞飞 发表于 2025-3-6 21:22

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

马黑黑 发表于 2025-3-6 21:23

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

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

红影 发表于 2025-3-6 21:48

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

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

红影 发表于 2025-3-6 21:51

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

小辣椒 发表于 2025-3-6 21:58

这个视频配的真好{:4_199:}

花飞飞 发表于 2025-3-6 22:04

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

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

杨帆 发表于 2025-3-6 22:59

漂亮！谢谢马老师精彩分享{:4_190:}

马黑黑 发表于 2025-3-6 23:45

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

{:4_191:}

马黑黑 发表于 2025-3-6 23:46

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

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

花飞飞 发表于 2025-3-7 18:28

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

{:4_190:}好哒，实践一下再汇报哈

马黑黑 发表于 2025-3-7 19:31

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

俺又不是领导{:4_170:}

花飞飞 发表于 2025-3-7 19:34

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

你不是领导，你是顶梁柱{:4_170:}

马黑黑 发表于 2025-3-7 19:43

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

嘘——，两会正在开着

花飞飞 发表于 2025-3-7 20:41

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

{:4_170:}我左右看看有没有敌情

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

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

{:4_189:}

花飞飞 发表于 2025-3-8 20:00

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


两会热火朝天中。。

马黑黑 发表于 2025-3-8 20:52

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

那必须的
页: [1] 2 3 4 5
查看完整版本: 美丽世界（粒子模块使用帖子子元素做容器演示）