至此流年各天涯

马黑黑

马黑黑

帖子代码

1. <style>
   
2.   @import 'https://638183.freep.cn/638183/tzmaker/tz5.css';
   
3.   .pa { --bg: url('https://638183.freep.cn/638183/t24/w8/tmya.webp') no-repeat center/cover; --ma-size: 120px; }
   
4.   .fadeInLrc { left: 50px; top: 30px; writing-mode: vertical-rl; text-orientation: upright; z-index: 105; }
   
5.   .char { padding: 4px; }
   
6.   #msvg { bottom: 20px; }
   
7. </style>
   
8. 
   
9. 
   
10. <div class="pa">
    
11.   <svg id="msvg" width="200" height="200">
    
12.     <g>
    
13.       <title>调节进度</title>
    
14.       <path id="track" d="M10 100 A1 1 0 0 0 190 100" fill="none" stroke="lightblue" stroke-width="8" />
    
15.       <path id="prog" d="M10 100 A1 1 0 0 0 190 100" fill="none" stroke="lightgreen" stroke-width="8" />
    
16.     </g>
    
17.   </svg>
    
18. </div>
    
19. 
    
20. <script>
    
21.   var jsFile = 'https://638183.freep.cn/638183/tzmaker/tz5.js';
    
22.   loadJs(jsFile, tzInit);
    
23. 
    
24.   var gc = `[00:01.600]至此流年各天涯\n[00:10.300]歌手:我不理智\n[00:18.490]天晴了 又下雨了\n[00:22.490]人来人往 聚散的匆忙\n[00:26.490]心怀期待的人还在等待\n[00:30.490]攒满失望的人已离开\n[00:35.490]谁怂了 谁眼睛红了\n[00:40.490]失无所失 计较着什么\n[00:44.490]分别后的难过都是依赖\n[00:48.490]无法相拥的人要好好道别\n[00:56.490]倘若你在四下无人的夜突然想起我\n[01:00.490]希望你能记得曾几何时我也深爱过\n[01:04.490]无心风月 独钟你\n[01:08.490]太认真了我弄丢了自己\n[01:12.490]当初我自云云人海之中独独看到你\n[01:16.490]如今我再将你好好的还回人海里\n[01:22.490]至此流年 各天涯\n[01:26.490]明天的路你不要害怕\n[01:32.490]我走了\n[02:04.490]谁怂了 谁眼睛红了\n[02:08.490]失无所失计较着什么\n[02:12.490]分别后的难过都是依赖\n[02:16.490]无法相拥的人要好好道别\n[02:26.490]倘若你在四下无人的夜突然想起我\n[02:30.490]希望你能记得曾几何时我也深爱过\n[02:34.490]无心风月 独钟你\n[02:38.490]太认真了我弄丢了自己\n[02:42.490]当初我自云云人海之中独独看到你\n[02:46.490]如今我再将你好好的还回人海里\n[02:50.490]至此流年 各天涯\n[02:54.490]明天的路你不要害怕\n[02:58.490]倘若你在四下无人的夜突然想起我\n[03:02.490]希望你能记得曾几何时我也深爱过\n[03:06.490]无心风月 独钟你\n[03:10.490]太认真了我弄丢了自己\n[03:16.490]当初我自云云人海之中独独看到你\n[03:20.490]如今我再将你好好的还回人海里\n[03:24.490]至此流年 各天涯\n[03:28.490]明天的路你不要害怕\n[03:36.490]我走了`;
    
25. 
    
26.   function loadJs(url, callback) {
    
27.     const script = document.createElement('script');
    
28.     script.charset = 'utf-8';
    
29.     script.src = url;
    
30.     script.defer = true;
    
31.     script.onload = callback;
    
32.     document.body.appendChild(script);
    
33.   }
    
34. 
    
35.   function tzInit() {
    
36.     var tz = TZ('pa');
    
37.     tz.add('audio', '', '', {src: 'https://music.163.com/song/media/outer/url?id=470057375'});
    
38.     tz.add('video', '', 'pd-vid', {src: 'https://img.tukuppt.com/video_show/3664703/00/02/13/5b51530e63ad7.mp4'});
    
39.     tz.add('img', '', 'ma', { src: 'https://638183.freep.cn/638183/small/780.webp' }).style('bottom: 50px;').playmp3();
    
40.     tz.svgprog('msvg', 'track', 'prog');
    
41.     tz.lrc(tz.lrc2HC(gc), '', true);//.style('top: 30px;');
    
42.     tz.fs().style('right: 20px; top: 20px;');
    
43.     tz.autoMid();
    
44.   }
    
45. </script>

复制代码

山人

评分刷新通过

马黑黑

细心的朋友会从帖子代码中发现：插件和配套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 插件的名称。

马黑黑

04行代码请留意一下。

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

杨帆

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