《碧瑶 - 小池塘》所使用的JS资源相关说明
<style>.pa p { font: normal 18px sans-serif; margin: 12px 0; }
.mum { position: relative; margin: 0; padding: 10px; font: normal 16px/20px Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; color: black; background: rgba(240, 240, 240,.95); box-shadow: 2px 2px 4px gray; border: thick groove lightblue; border-radius: 6px; }
.mum ::selection { background-color: rgba(0,100,100,.35); }
.mum div { margin: 0; padding: 0; }
.mum cl-cd { display: block; position: relative; margin: 0 0 0 50px; padding: 0 0 0 10px; white-space: pre-wrap; overflow-wrap: break-word; border-left: 1px solid silver; }
.mum cl-cd::before { position: absolute; content: attr(data-idx); width: 50px; color: gray; text-align: right; transform: translate(-70px); }
.tRed { color: red; }
.tBlue { color: blue; }
.tGreen { color: green; }
.tDarkRed { color: darkred; }
.tMagenta { color: magenta; }
</style>
<p>帖子《碧瑶 - 小池塘》演示地址：</p>
<blockquote>
一、绿色粒子 <a href="https://www.huachaowang.com/forum.php?mod=viewthread&tid=75924" target="_blank">本论坛</a><br>
二、绿色粒子 <a href="http://mhh.52qingyin.cn/art/bshow.php?st=3&sd=3&art=mahei_1715559032" target="_blank">整站系统</a><br>
三、多彩粒子 <a href="http://qhxy.52qingyin.cn/art/bshow.php?st=4&sd=4&art=uvuz_1715558985" target="_blank">午后时光</a><br>
</blockquote>
<p><br></p>
<div class="pa">
<p>帖子使用了两个JS资源：其一，立体球播放控制器 3dball.js，其二，更改过的独立lrc歌词同步 lrc_only.js。两个资源的封装，均对帖子有相关约定，主要是：① 需要提供帖子容器id，lrc_only 要求id带 # 号并用小角引号包裹，3dball.js 不用引号、不带 # 号；② 音频 audio 标签要求 id="aud"；③ 3dball.js 要求帖子内要有 canvas画布 标签，id有否不论，画布的宽高尺寸最好一致（若不一致，脚本会依据短边尺寸将画布更改为正方形）；④ 3dball 接管了对音、视频以及CSS动画播放暂停的控制，帖子中的视频无需id，CSS动画需要在 animation 属性中附上 var(--state) 作为交互接口。资源的引用与配置方法如下：</p>
<div class='mum'>
<cl-cd data-idx="1"><<span class="tDarkRed">script</span>></cl-cd>
<cl-cd data-idx="2"> <span class="tGreen">//3dball.js放后面</span></cl-cd>
<cl-cd data-idx="3"> <span class="tBlue">var</span> files = [</cl-cd>
<cl-cd data-idx="4"> <span class="tMagenta">'https://638183.freep.cn/638183/web/js2024/lrc_only.js'</span>,</cl-cd>
<cl-cd data-idx="5"> <span class="tMagenta">'https://638183.freep.cn/638183/web/js2024/3dball.js'</span></cl-cd>
<cl-cd data-idx="6"> ];</cl-cd>
<cl-cd data-idx="7"> files.forEach((_, key) => {</cl-cd>
<cl-cd data-idx="8"> <span class="tBlue">var</span> sF = <span class="tRed">document</span>.createElement(<span class="tMagenta">'script'</span>);</cl-cd>
<cl-cd data-idx="9"> sF.charset = <span class="tMagenta">'UTF-8'</span>;</cl-cd>
<cl-cd data-idx="10"> sF.src = files;</cl-cd>
<cl-cd data-idx="11"> <span class="tRed">document</span>.body.appendChild(sF);</cl-cd>
<cl-cd data-idx="12"> sF.onload = () => {</cl-cd>
<cl-cd data-idx="13"> <span class="tBlue">if</span>(key === 0) {</cl-cd>
<cl-cd data-idx="14"> LRC({</cl-cd>
<cl-cd data-idx="15"> <span class="tBlue">papa:</span> <span class="tMagenta">'#tiezi'</span>,</cl-cd>
<cl-cd data-idx="16"> lrc_<span class="tBlue">css:</span> <span class="tMagenta">'<span class="tBlue">top:</span> 10px;'</span>,</cl-cd>
<cl-cd data-idx="17"> <span class="tBlue">lrcAr:</span> geci</cl-cd>
<cl-cd data-idx="18"> });</cl-cd>
<cl-cd data-idx="19"> }</cl-cd>
<cl-cd data-idx="20"> <span class="tBlue">else</span> mypic.onclick = () => aud.paused ? aud.play() : aud.pause();</cl-cd>
<cl-cd data-idx="21"> };</cl-cd>
<cl-cd data-idx="22"> });</cl-cd>
<cl-cd data-idx="23"> </cl-cd>
<cl-cd data-idx="24"> <span class="tBlue">var</span> lz = {<span class="tBlue">papa:</span> tiezi, <span class="tBlue">total:</span> 350, <span class="tBlue">r:</span> 4, <span class="tBlue">color:</span> <span class="tMagenta">'rgba(144,238,144,.6)'</span>};</cl-cd>
<cl-cd data-idx="25"> <span class="tBlue">let</span> geci = [,,];</cl-cd>
<cl-cd data-idx="26"><<span class="tDarkRed">/script</span>></cl-cd>
</div>
<p>首先，将两个JS文件地址装入数组 files 中（代码在 3~6 行），顺序有讲究，3dball.js 放在后面。接着，遍历数组 files 并依次加载资源文件，加载 lrc_only.js 时在其 onload 事件中配置歌词同步插件的相关参数（详情稍后附上），加载 3dball.js 时在其 onload 事件中写入帖子其他驱动事件（本实例是图片点击控制音乐播放暂停事件，这是额外附加的多个音频播放控制器）。这部分代码在 7~22 行。最后，给出 3dball.js 所需的 lz 对象配置（代码 24 行）和 lrc_only.js 需要的歌词数组（代码 25 行）；其中，lz 对象配置单独说明如下：</p>
<blockquote>
① papa: tiezi, - 指定帖子元素id，tiezi 是本例的id名称，不带#号不要引号<br>
② total: 350, - 定义立体球粒子总数，多少合适视画布尺寸、粒子半径而定<br>
③ r: 4, - 设置粒子半径，建议取值范围 1~10<br>
④ color: 'rgba(144,238,144,.6)' - 设定粒子颜色，使用随机颜色可用空值或删掉color参数
</blockquote>
<p>lrc歌词同步主要参数配置说明也一并奉上：</p>
<blockquote>
① papa: '#tiezi', - 指定帖子元素id，tiezi 是本例的id名称，这里需要带#号并用小角引号包裹起来<br>
② lrc_css: 'top: 10px;', - 设置歌词UI界面相关，请使用CSS语法编写，一般应该包含歌词的显示位置 left 和 top 等CSS属性。歌词底色设置请使用 color 属性，例如，color: gray; 表示歌词的底色使用灰色；设置同步歌词颜色请使用CSS变量 --bg 用来，例如，--bg: pink; 表示同步歌词颜色是粉红色<br>
③ lrcAr: geci, - 指定歌词数组名称，geci 来源于实例代码在 25 行中的声明<br>
</blockquote>
<p>【附】小池塘帖子完整代码</p>
<div class='mum'>
<cl-cd data-idx="1"><<span class="tDarkRed">style</span>></cl-cd>
<cl-cd data-idx="2"> #tiezi { <span class="tBlue">margin:</span> 20px auto; <span class="tBlue">width:</span> 1024px; <span class="tBlue">height:</span> 640px; <span class="tBlue">background:</span> url(<span class="tMagenta">'https://638183.freep.cn/638183/t24/2/pool.jpg'</span>) no-repeat center/cover; <span class="tBlue">box-shadow:</span> 3px 3px 6px #000; <span class="tBlue">overflow:</span> hidden; <span class="tBlue">z-index:</span> 1; <span class="tBlue">display:</span> grid; <span class="tBlue">place-items:</span> center; <span class="tBlue">position:</span> relative; }</cl-cd>
<cl-cd data-idx="3"> #tiezi > <span class="tBlue">canvas:</span>nth-of-type(1) { <span class="tBlue">position:</span> absolute; <span class="tBlue">top:</span> 180px; <span class="tBlue">cursor:</span> pointer; }</cl-cd>
<cl-cd data-idx="4"> #tiezi > <span class="tBlue">video:</span>nth-of-type(1) { <span class="tBlue">position:</span> absolute; <span class="tBlue">right:</span> -350px; <span class="tBlue">top:</span> 0; <span class="tBlue">width:</span> 100%; <span class="tBlue">height:</span> 40%; <span class="tBlue">transform:</span> rotate(30deg);</cl-cd>
<cl-cd data-idx="5"> <span class="tBlue">mix-blend-mode:</span> multiply; }</cl-cd>
<cl-cd data-idx="6"> #tiezi > <span class="tBlue">img:</span>nth-of-type(1) { <span class="tBlue">position:</span> absolute; <span class="tBlue">bottom:</span> 20px; <span class="tBlue">width:</span> 200px; <span class="tBlue">cursor:</span> pointer; <span class="tBlue">user-select:</span> none; <span class="tBlue">transform-origin:</span> 50% 100%; <span class="tBlue">animation:</span> swear linear .25s infinite alternate <span class="tBlue">var</span>(--state); }</cl-cd>
<cl-cd data-idx="7"> @keyframes swear { from { <span class="tBlue">transform:</span> skewY(5deg); } to { <span class="tBlue">transform:</span> skewY(-5deg); } }</cl-cd>
<cl-cd data-idx="8"><<span class="tDarkRed">/style</span>></cl-cd>
<cl-cd data-idx="9"> </cl-cd>
<cl-cd data-idx="10"><<span class="tDarkRed">div</span> <span class="tRed">id</span>=<span class="tMagenta">"tiezi"</span>></cl-cd>
<cl-cd data-idx="11"> <<span class="tDarkRed">audio</span> <span class="tRed">id</span>=<span class="tMagenta">"aud"</span> src=<span class="tMagenta">"https://music.163.com/song/media/outer/url?<span class="tRed">id</span>=1870859270"</span> autoplay><<span class="tDarkRed">/audio</span>></cl-cd>
<cl-cd data-idx="12"> <<span class="tDarkRed">img</span> <span class="tRed">id</span>=<span class="tMagenta">"mypic"</span> src=<span class="tMagenta">"https://638183.freep.cn/638183/t24/2/g1.png"</span> alt=<span class="tMagenta">""</span> /></cl-cd>
<cl-cd data-idx="13"> <<span class="tDarkRed">video</span> src=<span class="tMagenta">"https://img.tukuppt.com/video_show/2269348/00/17/44/5ec49820da8aa.mp4"</span> loop muted><<span class="tDarkRed">/video</span>></cl-cd>
<cl-cd data-idx="14"> <<span class="tDarkRed">canvas</span> width=<span class="tMagenta">"180"</span> height=<span class="tMagenta">"180"</span>><<span class="tDarkRed">/canvas</span>></cl-cd>
<cl-cd data-idx="15"><<span class="tDarkRed">/div</span>></cl-cd>
<cl-cd data-idx="16"> </cl-cd>
<cl-cd data-idx="17"><<span class="tDarkRed">script</span>></cl-cd>
<cl-cd data-idx="18"> <span class="tGreen">//3dball.js放后面</span></cl-cd>
<cl-cd data-idx="19"> <span class="tBlue">var</span> files = [</cl-cd>
<cl-cd data-idx="20"> <span class="tMagenta">'https://638183.freep.cn/638183/web/js2024/lrc_only.js'</span>,</cl-cd>
<cl-cd data-idx="21"> <span class="tMagenta">'https://638183.freep.cn/638183/web/js2024/3dball.js'</span></cl-cd>
<cl-cd data-idx="22"> ];</cl-cd>
<cl-cd data-idx="23"> files.forEach((_, key) => {</cl-cd>
<cl-cd data-idx="24"> <span class="tBlue">var</span> sF = <span class="tRed">document</span>.createElement(<span class="tMagenta">'script'</span>);</cl-cd>
<cl-cd data-idx="25"> sF.charset = <span class="tMagenta">'UTF-8'</span>;</cl-cd>
<cl-cd data-idx="26"> sF.src = files;</cl-cd>
<cl-cd data-idx="27"> <span class="tRed">document</span>.body.appendChild(sF);</cl-cd>
<cl-cd data-idx="28"> sF.onload = () => {</cl-cd>
<cl-cd data-idx="29"> <span class="tBlue">if</span>(key === 0) {</cl-cd>
<cl-cd data-idx="30"> LRC({</cl-cd>
<cl-cd data-idx="31"> <span class="tBlue">papa:</span> <span class="tMagenta">'#tiezi'</span>,</cl-cd>
<cl-cd data-idx="32"> lrc_<span class="tBlue">css:</span> <span class="tMagenta">'<span class="tBlue">top:</span> 10px;'</span>,</cl-cd>
<cl-cd data-idx="33"> <span class="tBlue">lrcAr:</span> geci</cl-cd>
<cl-cd data-idx="34"> });</cl-cd>
<cl-cd data-idx="35"> }</cl-cd>
<cl-cd data-idx="36"> <span class="tBlue">else</span> mypic.onclick = () => aud.paused ? aud.play() : aud.pause();</cl-cd>
<cl-cd data-idx="37"> };</cl-cd>
<cl-cd data-idx="38"> });</cl-cd>
<cl-cd data-idx="39"> </cl-cd>
<cl-cd data-idx="40"> <span class="tBlue">var</span> lz = {<span class="tBlue">papa:</span> tiezi, <span class="tBlue">total:</span> 350, <span class="tBlue">r:</span> 4, <span class="tBlue">color:</span> <span class="tMagenta">'rgba(144,238,144,.6)'</span>};</cl-cd>
<cl-cd data-idx="41"> <span class="tBlue">let</span> geci = [,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,];</cl-cd>
<cl-cd data-idx="42"><<span class="tDarkRed">/script</span>></cl-cd>
</div>
</div>
粒子多彩效果的感觉立体感更强一些。。{:4_199:} 画布加歌词的配置还挺复杂的样纸。。。
白老师写得明白，用的时候仔细看看。。
反正可以先套用。。{:4_170:} 南无月 发表于 2024-5-13 12:49
画布加歌词的配置还挺复杂的样纸。。。
白老师写得明白，用的时候仔细看看。。
反正可以先套用。。{:4_17 ...
就是加载JS文件时嵌套了一些功能性代码，逻辑清晰的 球体可进行点击控制之外，人物图片也可以点击控制。。。有更多选择。。这个设计很贴心。。 南无月 发表于 2024-5-13 12:50
球体可进行点击控制之外，人物图片也可以点击控制。。。有更多选择。。这个设计很贴心。。
球的转动可以顺时针、逆时针改变方向 马黑黑 发表于 2024-5-13 12:50
就是加载JS文件时嵌套了一些功能性代码，逻辑清晰的
{:4_199:}好哒，上面那一串套得好复杂。把画面，图片，视频都放在#tiezi 之下，是为了好控制对不。。
马黑黑 发表于 2024-5-13 12:51
球的转动可以顺时针、逆时针改变方向
{:4_173:}这也太好用了。。 南无月 发表于 2024-5-13 12:53
好哒，上面那一串套得好复杂。把画面，图片，视频都放在#tiezi 之下，是为了好控制对不。。
你做帖子不是一直这么做的吗？
好比你买了充电宝，还有经常使用的物件，肯定是随身携带的，必须放自己的包包里，难不成你要放在公园石凳下边去？ 南无月 发表于 2024-5-13 12:54
这也太好用了。。
就是改个方向继续转 南无月 发表于 2024-5-13 12:48
粒子多彩效果的感觉立体感更强一些。。
那是自然 马黑黑 发表于 2024-5-13 12:56
你做帖子不是一直这么做的吗？
好比你买了充电宝，还有经常使用的物件，肯定是随身携带的，必须放自己 ...
以前除了要拖两三个小播 之外没有这么写呀。
都是#vid#pic#canvas
现在是
#tiezi > canvas:
#tiezi > video:
#tiezi > img:
写法就不一样
看上去吧，以前是散装的，现在打包的还贴了标签的{:4_170:} 马黑黑 发表于 2024-5-13 13:02
那是自然
越自然越好看。。
看来这个彩球还分性别。。{:4_173:} 马黑黑 发表于 2024-5-13 12:57
就是改个方向继续转
还可以改扁的和长椭圆，照样转{:4_170:} 南无月 发表于 2024-5-13 17:53
还可以改扁的和长椭圆，照样转
是的 南无月 发表于 2024-5-13 17:53
越自然越好看。。
看来这个彩球还分性别。。
需要用彩超检验一下 马黑黑 发表于 2024-5-13 17:58
需要用彩超检验一下
又不是那啥，看颜色就知道啦{:4_170:} 马黑黑 发表于 2024-5-13 17:57
是的
最近太没时间了，不然真的要好好试着玩一玩 南无月 发表于 2024-5-13 18:06
最近太没时间了，不然真的要好好试着玩一玩
不急有时间再说 南无月 发表于 2024-5-13 18:06
又不是那啥，看颜色就知道啦
颜色是不行的。你想想，人种中有黑人白人，就以黑人白人为例，有男有女，还有黑白混血的，你能单凭颜色看出Ta是男是女吗？不行的，需要用彩超机之类的设备做鉴定。