论坛 › 欢乐水吧 › 《拂雪》（学习黑黑曲线进度条播放器）

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

《拂雪》（学习黑黑曲线进度条播放器）

<style>
#papa { margin: 80px 0 0 calc(50% - 681px); width: 1200px; height: 675px; background: url('https://pic.imgdb.cn/item/650af18ac458853aef781a9a.jpg') no-repeat center/cover; box-shadow: 4px 4px 8px black; overflow: hidden; display: grid; place-items: center; z-index: 1; position: relative; --state: running; }
#papa > img { position: absolute; top: 51%; opacity: .8; }
</style>

<div id="papa">
      <img src="https://pic.imgdb.cn/item/650af97ec458853aef79d93a.png" alt="" />
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=32897793.mp3" 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; color: Lavender; --bg: linear-gradient(rgba(70,130,180,.4),rgba(70,130,180,.7));',
                        fs_css: 'top:40%; color: #ddd; background: transparent;',
                        player_css: `
                              width: 260;
                              height: 60;
                                bottom: 25%; left: 45.5%;
                                border-width: 0;
                                --track: lightgray;
                                --prog: lightblue;
                        `,
                        dir: 1,
                        img: {play: 'https://pic.imgdb.cn/item/65051aa9661c6c8e54f3aafc.png', pause: 'https://pic.imgdb.cn/item/650afb38c458853aef7aa181.gif'},
                });
        });

        loadJs(js2, () => {
                H5lz({
                        papa: '#papa',
                        total: 180,
                        size: {width: 6, height: 6},
                        shape: {background: 'rgba(255,255,255,.5)', borderRadius: ''},
                        ani: 'toBottom',
                        maxTime: 30,
                        offset: {x: 100, y: 100},
                });
        });
})();

</script>

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

主要试试播放器按钮换成图片，还有向上弯曲。正好找到个带雪堆的，就扣雪堆上吧{:4_173:}

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

本来想暂停用静止的光盘，后来还是用那小人吧，一个是因为在孙悟空那个帖子里现成的，再一个是想寓意暂停的时候就是分开的时候。

红影 发表于 2023-9-20 23:01

纯粹瞎闹，若是不好，就再换回https://pic.imgdb.cn/item/650b0918c458853aef7ea81f.png

红影 发表于 2023-9-20 23:04

奇怪，本地试验时弧度是这样https://pic.imgdb.cn/item/650b099ec458853aef7ed144.png
怎么觉得发到论坛里的时候拱起得更厉害了？{:4_203:}@马黑黑

马黑黑 发表于 2023-9-21 07:56

红影 发表于 2023-9-20 23:04
奇怪，本地试验时弧度是这样
怎么觉得发到论坛里的时候拱起得更厉害了？@马黑黑

从道理上讲，插件曲线弧度取决于player_css 设置的 width 和 height 值，是宽高尺寸共同作用于曲线的样子。该值插件使用 160 * 60 作为最小值，值大于它的设置才有效。

请确保本地测试的 width 、height 与正式发布的是一样的。

红影 发表于 2023-9-21 09:08

马黑黑 发表于 2023-9-21 07:56
从道理上讲，插件曲线弧度取决于player_css 设置的 width 和 height 值，是宽高尺寸共同作用于曲线的样子 ...

数值是一样的啊，我是本地测试好了后直接发的，没做修改。但是，为什么感觉那个拱起的样子不同了呢？{:4_203:}

世外桃源 发表于 2023-9-21 12:14

欣赏欣赏

红影 发表于 2023-9-21 12:54

世外桃源 发表于 2023-9-21 12:14
欣赏欣赏

感谢桃源鼓励，我把粒子给变成雪花了{:4_173:}

马黑黑 发表于 2023-9-21 19:17

红影 发表于 2023-9-21 09:08
数值是一样的啊，我是本地测试好了后直接发的，没做修改。但是，为什么感觉那个拱起的样子不同了呢？{:4_ ...

不知道

马黑黑 发表于 2023-9-21 19:22

马黑黑 发表于 2023-9-21 19:17
不知道
我也在本地测试了，没有看出区别

红影 发表于 2023-9-21 21:04

马黑黑 发表于 2023-9-21 19:22
我也在本地测试了，没有看出区别

你看人物的脚，本地测试时圆弧还离开点距离，论坛里的几乎贴着了。

红影 发表于 2023-9-21 21:07

马黑黑 发表于 2023-9-21 19:17
不知道

那就不去管它了。

马黑黑 发表于 2023-9-21 22:26

红影 发表于 2023-9-21 21:07
那就不去管它了。

我拿你的帖子测试，未发现你说的情况

马黑黑 发表于 2023-9-21 22:27

红影 发表于 2023-9-21 21:04
你看人物的脚，本地测试时圆弧还离开点距离，论坛里的几乎贴着了。

我还拿像素尺来量了，一样的

红影 发表于 2023-9-22 09:49

马黑黑 发表于 2023-9-21 22:26
我拿你的帖子测试，未发现你说的情况

不去管了，可能是我没做刷新{:4_173:}

红影 发表于 2023-9-22 09:50

马黑黑 发表于 2023-9-21 22:27
我还拿像素尺来量了，一样的

对哦，可以像素尺测一下的，嗯，下回遇到吃不准的事，我也量一下。

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

红影 发表于 2023-9-22 09:49
不去管了，可能是我没做刷新

也许是吧

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

马黑黑 发表于 2023-9-22 17:31
也许是吧

我觉得这个弧形也可以做在鹊桥外侧，肯定很有趣{:4_173:}

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

红影 发表于 2023-9-22 20:38
我觉得这个弧形也可以做在鹊桥外侧，肯定很有趣

{:4_181:}

查看完整版本: 《拂雪》（学习黑黑曲线进度条播放器）