战曲

马黑黑 · 发表于 2023-9-22 17:35

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

马黑黑 · 发表于 2023-9-22 17:38

h5 2d粒子插件修复了一个bug，曲线进度条插件添加了两个新样式。若效果不出来，请按 Ctrl + F5 硬刷新。帖子代码：

<style>
#papa { margin: 0 0 0 calc(50% - 593px); width: 1024px; height: 640px; background: url('https://638183.freep.cn/638183/t23/1/708.webp') no-repeat center/cover; box-shadow: 4px 4px 8px black; overflow: hidden; display: grid; place-items: center; z-index: 1; position: relative; --state: running; }
</style>
<div id="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=552433256" autoplay loop></audio>
</div>
<script>
(function() {
let lrcAr = [ [2,"战曲",2], [4,"Battle Epic Song",2],[8,"",1] ];
let js1 = 'https://638183.freep.cn/638183/web/api/curve_lrc.js', js2 = 'https://638183.freep.cn/638183/web/lizi/h5lz_2d.js';
let loadJs = (url,callback) => {
let body = document.querySelector('body'), jsNode = document.createElement('script');
jsNode.charset = 'utf-8';
jsNode.setAttribute('src', url);
body.appendChild(jsNode);
jsNode.onload = () => callback();
};
loadJs(js1, () => {
HCPlayer({
papa: '#papa',
lrcAr: lrcAr,
lrc_css: 'top: 20px;',
fs_css: 'color: #ddd; background: transparent;',
player_css: `
bottom: 10px;
filter: hue-rotate(100deg);
--track: lightgray;
--prog: orange;
`,
dir: 2,
});
});
loadJs(js2, () => {
H5lz({
papa: '#papa',
total: 40,
size: {width: 32, height: 32},
shape: {background: 'url("https://638183.freep.cn/638183/t23/btn/rock1.png")', borderRadius: '0'},
ani: 'toTop',
maxTime: 30,
offset: {x: -200, y: 0},
});
});
})();
</script>

复制代码

马黑黑 · 发表于 2023-9-22 17:40

第 33 行：

dir: 2,

是播放器样式选择，当前播放器插件供选择的数值分别为 0，1，2，3 共四个。

马黑黑 · 发表于 2023-9-22 17:44

第 42 行：

shape: {background: 'url("https://638183.freep.cn/638183/t23/btn/rock1.png")', borderRadius: '0'},

注意小角单、双引号的写法。其中的小角双引号如果不要，语法上是没有问题的，但论坛会自动给图片地址添加上 ubb 解析代码，造成背景图不能显示，加上引号后就没问题了；由于插件参数 background 也需要引号，所以存在引号嵌套使用的现象，需要分清各自的上下文。