分裂人格

马黑黑 发表于 2026-3-6 07:49

马黑黑 发表于 2026-3-6 07:50

本帖测试 tzMaker 简化版 tz2026，代码:

<style>
@import 'https://638183.freep.cn/638183/tzmaker/tz2026.css?v1';
.pa { --bg: url('https://638183.freep.cn/638183/t24/6/stage.jpg') no-repeat center/cover; }
.player { bottom: 50px; width: 120px; height: 120px; background: url('https://638183.freep.cn/638183/small/780.webp') no-repeat center/cover; }
.svgprog { bottom: 20px; }
.lrc { right: 50px; top: 30px; writing-mode: vertical-rl; letter-spacing: 4px; text-orientation: upright; }
.btnFs { left: 30px; top: 30px; color: lightblue; }
</style>

<div class="pa">
<audio src="https://music.163.com/song/media/outer/url?id=1983337895" autoplay loop></audio>
<video class="pd-vid" src="https://img.tukuppt.com/video_show/2475824/00/08/27/5d1c226cd2de7.mp4" autoplay loop muted></video>
<div class="lrc">LRC</div>
<div class="player rotate" title="Alt+X"></div>

<div class="btnFs"></div>
<svg class="svgprog" width="200" height="200">
<g>
   <title>调节进度</title>
   <path id="track" d="M10 100 A1 1 0 0 0 190 100" fill="none" stroke="lightblue" stroke-width="8" />
   <path id="prog" d="M10 100 A1 1 0 0 0 190 100" fill="none" stroke="lightgreen" stroke-width="8" />
</g>
</svg>
</div>

<script>
var jsFile = 'https://638183.freep.cn/638183/tzmaker/tz2026.min.js';
loadJs(jsFile, tzInit);

var gc = `大芳-分裂人格
编曲&和声编写&混音：小皮
和声：大芳
录音：大芳
一个人上下班
一个人说晚安
一个人吃早餐
内心驯服不了的不安
今天听哪首歌
扮演哪种人格
寻找哪段感情寄托
用哪种情绪面对指责
听说又有人分手了
习惯了单身的你不怕寂寞
看淡了现实还是被打败了
眼泪却流不出了
最偏爱那一首歌
你最爱扮演哪种人格
感情空白了该怎么找寄托
哪种情绪才能自我安和
又是一个周末
周围都热闹着
仿佛也只有我
面对热闹不知所措
听过好多的歌
拥有几种人格
其实还是有点难过
城市很大你却迷失了
现在听哪一首歌
你又要扮演哪种人格
感情已散了说好不在乎了
情绪却控制不了了
现代人的人格
早已不再是同一种底色
听哪一首歌扮演哪种人格
我们是不是都不会痊愈了
现在听哪一首歌
你又要扮演哪种人格
感情已散了说好不在乎了
情绪却控制不了了
现代人的人格
早已不再是同一种底色
听哪一首歌扮演哪种人格
我们是不是都不会痊愈了
天已快亮了你不用安慰我
听完这首歌我们就会好的`;

function loadJs(url, callback) {
const script = document.createElement('script');
script.charset = 'utf-8';
script.src = url;
script.defer = true;
script.onload = callback;
document.head.appendChild(script);
}

function tzInit() {
var tz = TZ('pa');
tz.start(gc);
}
</script>

马黑黑 发表于 2026-3-6 07:57

第 15 行代码是预留代码，去掉其注释将启用 HTML 进度条，同时应删掉 17~23 行 SVG进度条代码，CSS中 05 行代码 .svgprog 改为 .bgprog。

进度条二选一：要么使用SVG进度条，要么使用html元素进度条。

歌词如果需要设置偏移量，13行代码，<div class="lrc">LRC</div>，加上一个 data-skip 属性设置，例如：

<div class="lrc" data-skip="-0.2">LRC</div>

引号中的浮点数以秒为单位。

查看 tz2026 插件的更多说明请移步：回归传统：tz2026低调出场 - 马黑黑教程专版 - 花潮论坛 - Powered by Discuz!

梦江南 发表于 2026-3-6 07:59

黑黑老师早上好！这么早就能享受精彩的音画。辛苦了！{:4_187:}

梦江南 发表于 2026-3-6 08:03

黑黑老师，本帖测试 tzMaker 简化版 tz2026，这是什么意思？电饭煲还有简化版吗？

杨帆发表于 2026-3-6 13:15

传统的，往往也是经典的， tzMaker 简化版 tz2026测试效果完美，谢谢马老师精彩示范{:4_176:}

红影发表于 2026-3-6 15:52

马黑黑发表于 2026-3-6 07:57
第 15 行代码是预留代码，去掉其注释将启用 HTML 进度条，同时应删掉 17~23 行 SVG进度条代码，CSS中 05 行 ...

一会再去看代码，先来看看分裂人格。这个歌名太有意思了{:4_173:}

红影发表于 2026-3-6 16:00

这个设置真细腻，鼠标停留在进度条上还能看到所在点的时间。{:4_204:}

马黑黑 发表于 2026-3-6 18:26

红影发表于 2026-3-6 16:00
这个设置真细腻，鼠标停留在进度条上还能看到所在点的时间。

一直都酱紫的呀

马黑黑 发表于 2026-3-6 18:26

红影发表于 2026-3-6 15:52
一会再去看代码，先来看看分裂人格。这个歌名太有意思了

{:4_173:}

马黑黑 发表于 2026-3-6 18:27

杨帆发表于 2026-3-6 13:15
传统的，往往也是经典的， tzMaker 简化版 tz2026测试效果完美，谢谢马老师精彩示范

{:4_191:}

马黑黑 发表于 2026-3-6 18:27

梦江南发表于 2026-3-6 07:59
黑黑老师早上好！这么早就能享受精彩的音画。辛苦了！

晚上好

马黑黑 发表于 2026-3-6 18:28

梦江南发表于 2026-3-6 08:03
黑黑老师，本帖测试 tzMaker 简化版 tz2026，这是什么意思？电饭煲还有简化版吗？

电饭煲是基于此前版本的工具，锅头的样纸。这个 tz2026 不打算造锅头。

梦江南 发表于 2026-3-6 19:40

马黑黑发表于 2026-3-6 18:28
电饭煲是基于此前版本的工具，锅头的样纸。这个 tz2026 不打算造锅头。

黑黑老师，意思是这样直接复制代码就可以了，不用到电饭煲去制作了。

梦江南 发表于 2026-3-6 19:41

马黑黑发表于 2026-3-6 18:27
晚上好

黑黑老师晚上好。

马黑黑 发表于 2026-3-6 20:27

梦江南发表于 2026-3-6 19:41
黑黑老师晚上好。

{:4_191:}

马黑黑 发表于 2026-3-6 20:28

梦江南发表于 2026-3-6 19:40
黑黑老师，意思是这样直接复制代码就可以了，不用到电饭煲去制作了。

对，代码结构是固化的。至于自定义的东东，自己做就好。

梦江南 发表于 2026-3-7 07:51

马黑黑发表于 2026-3-6 20:27

早上问好黑黑老师。{:4_190:}

梦江南 发表于 2026-3-7 07:51

马黑黑发表于 2026-3-6 20:28
对，代码结构是固化的。至于自定义的东东，自己做就好。

谢谢黑黑老师回复。{:4_180:}

马黑黑 发表于 2026-3-7 07:52

梦江南发表于 2026-3-7 07:51
谢谢黑黑老师回复。

早

页: [1] 2 3

花潮论坛's Archiver

分裂人格