论坛 › 欢乐水吧 › 战曲

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

战曲

<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 = [ , , ];
        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: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 = [ , , ];
        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 也需要引号，所以存在引号嵌套使用的现象，需要分清各自的上下文。

红影 发表于 2023-9-22 19:35

又是一种新的进度条效果呢，线段加弧度，漂亮{:4_199:}

红影 发表于 2023-9-22 19:36

马黑黑 发表于 2023-9-22 17:40
第 33 行：

    dir: 2,


0 1 2知道了，很想知道3是个什么样子{:4_173:}

红影 发表于 2023-9-22 19:36

这么多的导弹升空，很是雄伟壮观{:4_199:}

马黑黑 发表于 2023-9-22 20:07

红影 发表于 2023-9-22 19:35
又是一种新的进度条效果呢，线段加弧度，漂亮

插件还是原来的曲线插件，扩展了一下

马黑黑 发表于 2023-9-22 20:08

红影 发表于 2023-9-22 19:36
0 1 2知道了，很想知道3是个什么样子

0、1是一对，2、3是一对

马黑黑 发表于 2023-9-22 20:09

红影 发表于 2023-9-22 19:36
这么多的导弹升空，很是雄伟壮观

美军亚太总司令被强行弄回国，靠的是这个{:4_170:}

红影 发表于 2023-9-22 20:45

马黑黑 发表于 2023-9-22 20:07
插件还是原来的曲线插件，扩展了一下

这个扩展很漂亮{:4_199:}

红影 发表于 2023-9-22 20:45

马黑黑 发表于 2023-9-22 20:08
0、1是一对，2、3是一对

哦，原来3是向上的{:4_173:}

红影 发表于 2023-9-22 20:47

马黑黑 发表于 2023-9-22 20:09
美军亚太总司令被强行弄回国，靠的是这个

你这里是40个就这么壮观了，要是再加点，更震撼{:4_173:}

马黑黑 发表于 2023-9-22 20:47

红影 发表于 2023-9-22 20:45
哦，原来3是向上的

试一下就知道的。另外，更新后的插件，还会处理非法的数值

马黑黑 发表于 2023-9-22 20:47

红影 发表于 2023-9-22 20:47
你这里是40个就这么壮观了，要是再加点，更震撼

太密集了也不好，随便震慑一下就好

红影 发表于 2023-9-22 22:23

马黑黑 发表于 2023-9-22 20:47
试一下就知道的。另外，更新后的插件，还会处理非法的数值

嗯嗯，这个太厉害了{:4_199:}

红影 发表于 2023-9-22 22:23

马黑黑 发表于 2023-9-22 20:47
太密集了也不好，随便震慑一下就好

随便震慑一下，看到这句，笑，非常自信的军事实力{:4_173:}

马黑黑 发表于 2023-9-23 08:15

红影 发表于 2023-9-22 22:23
随便震慑一下，看到这句，笑，非常自信的军事实力

解放军若需要攻打美国本土，也不是什么问题。据称，我们江那头的小伙伴也都有这个能力，美国还有一部电影假象他们被统治了。

马黑黑 发表于 2023-9-23 08:17

红影 发表于 2023-9-22 22:23
嗯嗯，这个太厉害了

我很少做出错处理，我是基于这样的想法：使用者都期待插件能正常工作，所以会严格按照约定配置插件参数，不用花太多精力去做出错处理。

不过这不是好习惯，一些必要的出错处理还是要有才好。

小辣椒 发表于 2023-9-23 09:25

黒黑的新教程分享应该又有许多了，小辣椒赤脚也是赶不上了{:4_198:}

查看完整版本: 战曲