刀郎 - 未来的底片 - 欢乐水吧 - 花潮论坛

马黑黑 发表于 2023-9-19 18:16

刀郎 - 未来的底片

马黑黑 发表于 2023-9-19 18:16

本帖最后由马黑黑于 2023-9-19 18:18 编辑

帖子代码
<style>
#papa { margin: 0 0 0 calc(50% - 593px); width: 1024px; height: 640px; background: url('https://638183.freep.cn/638183/t23/webp2/02.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; }
#papa > img { border-radius: 50%; opacity: .05; }
</style>

<div id="papa">
   <img src="https://638183.freep.cn/638183/t23/webp2/dipm.webp" alt="" />
   <audio id="aud" src="https://music.163.com/song/media/outer/url?id=2063486984" 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;
                           --track: lightgray;
                           --prog: lightgreen;
                     `,
                     dir: 0,
            });
   });

   loadJs(js2, () => {
            H5lz({
                     papa: '#papa',
                     total: 100,
                     size: {width: 15, height: 15},
                     shape: {background: '', borderRadius: ''},
                     ani: 'toLeft',
                     maxTime: 30,
                     offset: {x: 100, y: 100},
            });
   });
})();

</script>

马黑黑 发表于 2023-9-19 18:24

本帖最后由马黑黑于 2023-9-19 20:20 编辑

曲线进度条播放器插件配置：

            HCPlayer({
                     papa: '#papa',
                     lrcAr: lrcAr,
                     lrc_css: 'top: 20px;',
                     fs_css: 'color: #ddd; background: transparent;',
                     player_css: `
                           bottom: 10px;
                           --track: lightgray;
                           --prog: lightgreen;
                     `,
                     dir: 0,
            });

dir 是此前插件没有的，它的作用是曲线凸面朝向，可选择共两个：0 和 1，0就是本帖的样纸，1 凸面朝上，默认或缺失是 0 。

播放器可以定义宽高尺寸，在 player_css 参数中用CSS语句：

                     player_css: `
                           width: 300;
                           height: 100;
                           bottom: 10px;
                           border-width: 0;
                           --track: lightgray;
                           --prog: lightgreen;
                     `,
插件对播放器的尺寸有一个限制：最低宽高为 160 * 60，自定义低于这个数值的使用该数值。

马黑黑 发表于 2023-9-19 18:29

另外，可以自定义播放器的播放、暂停按钮，设置参数是 img : {play: '', pause: ''}，例如：

HCPlayer({
papa: '#papa',
lrcAr: lrcAr,
lrc_css: 'top: 20px;',
fs_css: 'color: #ddd; background: transparent;',
player_css: `
bottom: 10px;
border-width: 0;
--track: lightgray;
--prog: lightgreen;
`,
dir: 0,
img: {play: '播放图片地址', pause: '暂停图片地址'},
});

插件图片锁死为 32 *32，自定义图片若不是这个尺寸也会强制使用该尺寸。

朵拉发表于 2023-9-19 18:55

坐沙发，欣赏咯~~{:4_190:}

千羽发表于 2023-9-19 19:07

明月当空，幽静的山谷。如果没有划过这些靓丽的小粒子，谁敢去啊？{:4_173:}

千羽发表于 2023-9-19 19:10

这个播放器简明新颖，别有韵味，黑黑老师又有创新了{:4_187:}

马黑黑 发表于 2023-9-19 19:26

千羽发表于 2023-9-19 19:10
这个播放器简明新颖，别有韵味，黑黑老师又有创新了

曲线进度条，也可以是折线什么的，还没有扩展

红影发表于 2023-9-19 20:10

黑黑把钱讲的曲线播放器做成插件了，真棒。这个里面还增加了弯弧是向上还是向下，拓展了新功能{:4_199:}

红影发表于 2023-9-19 20:11

img: {play: '播放图片地址', pause: '暂停图片地址'},

这个换图片的，不管是之前的极简的还是这个，还没人弄过，不知道弄出来是什么样的{:4_173:}

红影发表于 2023-9-19 20:13

这个场景很玄妙，还加了个朦胧的影片胶带的图图，制作真棒{:4_199:}

红影发表于 2023-9-19 20:15

这个影片胶带的弧度正好和播放器进度的弧度相符呢{:4_187:}

马黑黑 发表于 2023-9-19 20:20

红影发表于 2023-9-19 20:15
这个影片胶带的弧度正好和播放器进度的弧度相符呢

不会吧{:4_170:}

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

千羽发表于 2023-9-19 19:07
明月当空，幽静的山谷。如果没有划过这些靓丽的小粒子，谁敢去啊？

粒子的好处之一就是给人壮胆{:4_170:}

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

红影发表于 2023-9-19 20:13
这个场景很玄妙，还加了个朦胧的影片胶带的图图，制作真棒

简单制作而已

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

朵拉发表于 2023-9-19 18:55
坐沙发，欣赏咯~~

晚上好

马黑黑 发表于 2023-9-19 20:23

红影发表于 2023-9-19 20:11
img: {play: '播放图片地址', pause: '暂停图片地址'},

这个换图片的，不管是之前的极简的还是这个，还 ...

图片要准备好

千羽发表于 2023-9-19 21:05

马黑黑发表于 2023-9-19 20:21
粒子的好处之一就是给人壮胆

哈哈，那样的地方，你晚上敢去吗

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

千羽发表于 2023-9-19 21:05
哈哈，那样的地方，你晚上敢去吗

歌词里说的北邙，我都去过

朵拉发表于 2023-9-19 21:14

马黑黑发表于 2023-9-19 20:22
晚上好

马师好，我的那首千金散尽，换上原唱杨宗纬，
您给听一听有没有音乐哈~~{:4_190:}

页: [1] 2 3 4 5

花潮论坛's Archiver

刀郎 - 未来的底片