|
|

楼主 |
发表于 2025-10-18 07:44
|
显示全部楼层
本帖最后由 马黑黑 于 2025-10-18 08:08 编辑
代码:
- <style>
- @import 'https://638183.freep.cn/638183/web/tz/tz.d.css';
- .pa { --offsetX: 81px; --bg: url('https://638183.freep.cn/638183/t24/w6/11.webp') no-repeat center/cover; --ma-size: 3vw; }
- </style>
- <div class="pa"></div>
- <script type="module">
- import TZ from 'https://638183.freep.cn/638183/web/tz/tz.d.js';
- var tz = TZ.TZ('pa');
- var musics = [
- ['https://music.163.com/song/media/outer/url?id=1981095072', 'EinWil / Jayx - 神姬'],
- ['https://music.163.com/song/media/outer/url?id=492292805', 'Jannik - Sky Mirrors穹镜'],
- ['https://music.163.com/song/media/outer/url?id=508093905', 'Jannik - 弦意'],
- ['https://music.163.com/song/media/outer/url?id=411356357', 'eigenTunes亦听 - 墨家神机'],
- ['https://music.163.com/song/media/outer/url?id=1460391047', 'AirJordy - 末'],
- ['https://music.163.com/song/media/outer/url?id=366419', '墨明棋妙 - 二十二桥枫别雨'],
- ['https://music.163.com/song/media/outer/url?id=25700050', '和平之月 - 宇宙'],
- ['https://music.163.com/song/media/outer/url?id=28283678', '绍容 - Unicorn 麒麟']
- ];
- tz.add('video', '', 'pd-vid', {
- src: 'https://img.tukuppt.com/video_show/15653652/01/27/12/62650aab384cc.mp4'
- });
- tz.mlist(musics).style('right: 20px; top: 20px;');
- tz.bgprog().style('left: 70px; bottom: 20px;');
- tz.add('img', '', 'ma', {
- src: 'https://638183.freep.cn/638183/small/2025/disc.webp',
- style: 'left: 160px; bottom: 40px;'
- }).playmp3();
- tz.fs().style('bottom: 20px; right: 100px;');
- </script>
复制代码
发专辑步骤:
第一步:准备歌单,详细代码在第 12~21 行。
注意歌单是一个JS二维数组,结构是酱紫——
var 歌单 = [
['地址', '歌名'],
['地址', '歌名'],
];
其中变量名 歌单 名称自己定义,合法、好记就行,建议使用汉语拼音表示,例如 gedan,你要用中文也成。
第二步:创建帖子歌词列表,代码在第 27 行。
指令:tz.mlist(歌单数组名称)
假设前面准备的歌单变量名是 gedan,那指令代码写成:
tz.mlist(gedan);
然后,我们希望安排一下歌单在帖子中的位置,用 style() 链式指令完成:
tz.mlist(gedan).style('left: 20px; top: 20px;');
style() 是 tz.d 以前的版本都有的指令,用来补充设置所创建元素的CSS内联样式(行内临时设定的样式,县官不如现管中的现管样式,完全是CSS代码的写法,但注意CSS代码的头尾需要小角引号)。
就这两步。其余的如小播、视频、进度条等等元素的加入,一如过去 tz 版本方法。 |
评分
-
| 参与人数 3 | 威望 +150 |
金钱 +300 |
经验 +150 |
收起
理由
|
小辣椒
| + 50 |
+ 100 |
+ 50 |
赞一个! |
樵歌
| + 50 |
+ 100 |
+ 50 |
很给力! |
红影
| + 50 |
+ 100 |
+ 50 |
赞一个! |
查看全部评分
|