至此流年各天涯

马黑黑 发表于 2026-3-18 18:45

马黑黑 发表于 2026-3-18 19:56

帖子代码

<style>
@import 'https://638183.freep.cn/638183/tzmaker/tz5.css';
.pa { --bg: url('https://638183.freep.cn/638183/t24/w8/tmya.webp') no-repeat center/cover; --ma-size: 120px; }
.fadeInLrc { left: 50px; top: 30px; writing-mode: vertical-rl; text-orientation: upright; z-index: 105; }
.char { padding: 4px; }
#msvg { bottom: 20px; }
</style>

<div class="pa">
<svg id="msvg" 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/tz5.js';
loadJs(jsFile, tzInit);

var gc = `至此流年各天涯\n歌手:我不理智\n天晴了又下雨了\n人来人往聚散的匆忙\n心怀期待的人还在等待\n攒满失望的人已离开\n谁怂了谁眼睛红了\n失无所失计较着什么\n分别后的难过都是依赖\n无法相拥的人要好好道别\n倘若你在四下无人的夜突然想起我\n希望你能记得曾几何时我也深爱过\n无心风月独钟你\n太认真了我弄丢了自己\n当初我自云云人海之中独独看到你\n如今我再将你好好的还回人海里\n至此流年各天涯\n明天的路你不要害怕\n我走了\n谁怂了谁眼睛红了\n失无所失计较着什么\n分别后的难过都是依赖\n无法相拥的人要好好道别\n倘若你在四下无人的夜突然想起我\n希望你能记得曾几何时我也深爱过\n无心风月独钟你\n太认真了我弄丢了自己\n当初我自云云人海之中独独看到你\n如今我再将你好好的还回人海里\n至此流年各天涯\n明天的路你不要害怕\n倘若你在四下无人的夜突然想起我\n希望你能记得曾几何时我也深爱过\n无心风月独钟你\n太认真了我弄丢了自己\n当初我自云云人海之中独独看到你\n如今我再将你好好的还回人海里\n至此流年各天涯\n明天的路你不要害怕\n我走了`;

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

function tzInit() {
var tz = TZ('pa');
tz.add('audio', '', '', {src: 'https://music.163.com/song/media/outer/url?id=470057375'});
tz.add('video', '', 'pd-vid', {src: 'https://img.tukuppt.com/video_show/3664703/00/02/13/5b51530e63ad7.mp4'});
tz.add('img', '', 'ma', { src: 'https://638183.freep.cn/638183/small/780.webp' }).style('bottom: 50px;').playmp3();
tz.svgprog('msvg', 'track', 'prog');
tz.lrc(tz.lrc2HC(gc), '', true);//.style('top: 30px;');
tz.fs().style('right: 20px; top: 20px;');
tz.autoMid();
}
</script>

山人发表于 2026-3-18 19:59

评分刷新通过

马黑黑 发表于 2026-3-18 20:22

细心的朋友会从帖子代码中发现：插件和配套css文档有变化。

是的，统一命名为 tz5（tz5.js、tz5.css）。这是 tz.5 的微调，插件代码未压缩并提供加了注释的模块化功能、解开注释即为 ES6 模块。使用 ES 模块发帖代码更简洁，遗憾的是它和 Discuz 论坛程序的评分机制无法契合。

tz5 针对 tz.5 的微调主要是：

（一）改进帖子视口水平方向自动居中算法，延用 --offsetX CSS变量但自动计算。计算方式是依托帖子父元素信息，从观感角度上看帖子自居中的行为更为自然；

（二）播放器、全屏按钮、进度条自动隐身。其中，目前播放器需要设置 class=“ma"（参照帖子代码 39 行），或者在小播的CSS 类选择器加入CSS变量 --opacity: var(--opacity);，后二者无需做任何改动（除非自定义进度条和全屏按钮的类名）；

（三）更改了帖子默认最大宽度为 1600px，同时仍然支持帖子的自定义宽高（用 width、height 属性）。

高能电饭煲制作的代码可以使用此插件，仅需更改 CSS 文档和 JS 插件的名称。

马黑黑 发表于 2026-3-18 20:32

04行代码请留意一下。

使用淡入歌词效果，类选择器是 .fadeInLrc，使用常规歌词同步，类选择器是 .lrc

杨帆发表于 2026-3-18 21:19

tz5 针对 tz.5 的微调很必要，效果更漂亮，使用更便捷，谢谢马老师经典示范与讲授{:4_180:}

朵拉发表于 2026-3-18 22:46

老师创意十足，学生已交作业，请您指正{:4_190:}

朵拉发表于 2026-3-18 22:48

另：学生制作过这个标题的音画，
如老师不嫌弃学生拙图，望笑纳{:4_190:}

红影发表于 2026-3-19 00:10

越是调整越完美，欣赏黑黑好帖{:4_199:}

马黑黑 发表于 2026-3-19 19:57

红影发表于 2026-3-19 00:10
越是调整越完美，欣赏黑黑好帖

完美总是不可能的，只能做到差不多的效果{:4_170:}

马黑黑 发表于 2026-3-19 19:57

朵拉发表于 2026-3-18 22:48
另：学生制作过这个标题的音画，
如老师不嫌弃学生拙图，望笑纳

{:4_191:}

马黑黑 发表于 2026-3-19 19:58

朵拉发表于 2026-3-18 22:46
老师创意十足，学生已交作业，请您指正

{:4_199:}

红影发表于 2026-3-21 17:59

马黑黑发表于 2026-3-19 19:57
完美总是不可能的，只能做到差不多的效果

即使完美不可能，接近完美的过程却是存在的，黑黑在做的就是这个过程{:4_187:}

马黑黑 发表于 2026-3-21 19:56

红影发表于 2026-3-21 17:59
即使完美不可能，接近完美的过程却是存在的，黑黑在做的就是这个过程

果酱果酱

红影发表于 2026-3-21 21:12

马黑黑发表于 2026-3-21 19:56
果酱果酱

无线趋近完美中{:4_187:}

马黑黑 发表于 2026-3-21 22:41

红影发表于 2026-3-21 21:12
无线趋近完美中

嗯嗯，有线的使用起来不够自由，有约束感

红影发表于 2026-3-22 17:06

马黑黑发表于 2026-3-21 22:41
嗯嗯，有线的使用起来不够自由，有约束感

打错字了，是无限而不是无线{:4_173:}

马黑黑 发表于 2026-3-22 18:08

红影发表于 2026-3-22 17:06
打错字了，是无限而不是无线

读起来一样的

红影发表于 2026-3-22 21:32

马黑黑发表于 2026-3-22 18:08
读起来一样的

有时候不注意同音字就会出去{:4_173:}

马黑黑 发表于 2026-3-23 08:26

红影发表于 2026-3-22 21:32
有时候不注意同音字就会出去

太正常了

页: [1] 2

花潮论坛's Archiver

至此流年各天涯