马黑PHP整站系统

《碧瑶 - 小池塘》所使用的JS资源相关说明

位置: 首页 > JS插件[ 发布时间: 2024.5.13  作者: 马黑  阅读: 192 ]

帖子 《碧瑶 - 小池塘》使用了两个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) 作为交互接口。资源的引用与配置方法如下:

<script>     //3dball.js放后面     var files = [         'https://638183.freep.cn/638183/web/js2024/lrc_only.js',         'https://638183.freep.cn/638183/web/js2024/3dball.js'     ];     files.forEach((_, key) => {         var sF = document.createElement('script');         sF.charset = 'UTF-8';         sF.src = files[key];         document.body.appendChild(sF);         sF.onload = () => {             if(key === 0) {                 LRC({                     papa: '#tiezi',                     lrc_css: 'top: 10px;',                     lrcAr: geci                 });             }             else mypic.onclick = () => aud.paused ? aud.play() : aud.pause();         };     });       var lz = {papa: tiezi, total: 350, r: 4, color: 'rgba(144,238,144,.6)'};     let geci = [[2,"碧瑶 - 小池塘", 6],[16.03,"……",1.0],[140.04,"乐洋洋",1.4]]; </script>

首先,将两个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 对象配置单独说明如下:

① papa: tiezi, - 指定帖子元素id,tiezi 是本例的id名称,不带#号不要引号
② total: 350, - 定义立体球粒子总数,多少合适视画布尺寸、粒子半径而定
③ r: 4, - 设置粒子半径,建议取值范围 1~10
④ color: 'rgba(144,238,144,.6)' - 设定粒子颜色,使用随机颜色可用空值或删掉color参数

lrc歌词同步主要参数配置说明也一并奉上:

① papa: '#tiezi', - 指定帖子元素id,tiezi 是本例的id名称,这里需要带#号并用小角引号包裹起来
② lrc_css: 'top: 10px;', - 设置歌词UI界面相关,请使用CSS语法编写,一般应该包含歌词的显示位置 left 和 top 等CSS属性。歌词底色设置请使用 color 属性,例如,color: gray; 表示歌词的底色使用灰色;设置同步歌词颜色请使用CSS变量 --bg 用来,例如,--bg: pink; 表示同步歌词颜色是粉红色
③ lrcAr: geci, - 指定歌词数组名称,geci 来源于实例代码在 25 行中的声明

【附】小池塘帖子完整代码

<style>     #tiezi { margin: 20px auto; width: 1024px; height: 640px; background: url('https://638183.freep.cn/638183/t24/2/pool.jpg') no-repeat center/cover; box-shadow: 3px 3px 6px #000; overflow: hidden; z-index: 1; display: grid; place-items: center; position: relative; }     #tiezi > canvas:nth-of-type(1) { position: absolute; top: 180px; cursor: pointer; }     #tiezi > video:nth-of-type(1) { position: absolute; right: -350px; top: 0; width: 100%; height: 40%; transform: rotate(30deg); mix-blend-mode: multiply; }     #tiezi > img:nth-of-type(1) { position: absolute; bottom: 20px; width: 200px; cursor: pointer; user-select: none; transform-origin: 50% 100%; animation: swear linear .25s infinite alternate var(--state); }     @keyframes swear { from { transform: skewY(5deg); } to { transform: skewY(-5deg); } } </style>   <div id="tiezi">     <audio id="aud" src="https://music.163.com/song/media/outer/url?id=1870859270" autoplay></audio>     <img id="mypic" src="https://638183.freep.cn/638183/t24/2/g1.png" alt="" />     <video src="https://img.tukuppt.com/video_show/2269348/00/17/44/5ec49820da8aa.mp4" loop muted></video>     <canvas width="180" height="180"></canvas> </div>   <script>     //3dball.js放后面     var files = [         'https://638183.freep.cn/638183/web/js2024/lrc_only.js',         'https://638183.freep.cn/638183/web/js2024/3dball.js'     ];     files.forEach((_, key) => {         var sF = document.createElement('script');         sF.charset = 'UTF-8';         sF.src = files[key];         document.body.appendChild(sF);         sF.onload = () => {             if(key === 0) {                 LRC({                     papa: '#tiezi',                     lrc_css: 'top: 10px;',                     lrcAr: geci                 });             }             else mypic.onclick = () => aud.paused ? aud.play() : aud.pause();         };     });       var lz = {papa: tiezi, total: 350, r: 4, color: 'rgba(144,238,144,.6)'};     let geci = [[2,"碧瑶 - 小池塘", 6],[12.03,"我家庭院",1.0],[13.06,"前面有个",1.0],[14.1,"小池塘",1.9],[16.03,"香水芙蓉",1.0],[17.07,"还有睡莲",1.9],[19,"水上躺",1.0],[20.04,"他们穿",1.0],[21.08,"红橙黄蓝",1.9],[23.01,"的衣裳",1.0],[24.04,"五彩缤纷",1.0],[25.08,"随波绽放",1.9],[27.01,"乐洋洋",1.2],[34,"我家庭院",1.0],[35.02,"前面有个",1.0],[36.06,"小池塘",1.0],[37.09,"池塘里面",1.9],[39.03,"住着许多",1.0],[40.06,"小鱼呀",1.0],[41.09,"他们穿",1.9],[43.03,"红橙黄蓝",1.0],[44.07,"的衣裳",1.9],[46,"五彩缤纷",1.0],[47.03,"游来游去",1.0],[48.07,"乐洋洋",2.0],[71.08,"我家庭院",1.0],[72.1,"前面有个",1.9],[74.03,"小池塘",1.0],[75.07,"池塘里面",1.9],[77,"住着许多",1.0],[78.04,"小鱼呀",1.0],[79.08,"他们穿",1.9],[81.01,"红橙黄蓝",1.0],[82.05,"的衣裳",1.0],[83.08,"五彩缤纷",1.9],[85.01,"游来游去",1.0],[86.04,"乐洋洋",1.4],[109.05,"我家庭院",1.0],[110.08,"前面有个",1.9],[112.01,"小池塘",1.0],[113.05,"香水芙蓉",1.0],[114.08,"还有睡莲",1.9],[116.01,"水上躺",1.0],[117.05,"他们穿",1.0],[118.09,"红橙黄蓝",1.9],[120.02,"的衣裳",1.0],[121.05,"五彩缤纷",1.0],[122.09,"随波绽放",1.9],[124.02,"乐洋洋",1.0],[125.06,"我家庭院",1.0],[126.09,"前面有个",1.9],[128.03,"小池塘",1.0],[129.06,"池塘里面",1.0],[130.1,"住着许多",1.9],[132.03,"小鱼呀",1.0],[133.07,"他们穿",1.9],[135,"红橙黄蓝",1.0],[136.04,"的衣裳",1.0],[137.07,"五彩缤纷",1.9],[139,"游来游去",1.0],[140.04,"乐洋洋",1.4]]; </script>

前一篇: rainyday插件试用心得
下一篇: colortext.js文档

发表评论:

       

评论列表 [0条]

Copyright © 2023 All Right Reserved 马黑PHP文章管理整站系统v1.8
联系我们: gxblk@163.com