马黑黑 发表于 2026-3-15 11:43

留声音乐

<style>
@import 'https://638183.freep.cn/638183/tzmaker/tz2026m.css';
.pa { --bg: url('https://638183.freep.cn/638183/t24/6/ls.jpg') no-repeat center/cover; }
.mlist { left: 30px; top: 30px; }
.player { bottom: 50px; width: 120px; height: 120px; background: url('https://638183.freep.cn/638183/small/fi1.webp') no-repeat center/cover; }
.bgprog { bottom: 20px; }
.btnFs { right: 30px; top: 30px; color: lightblue; }
</style>

<div class="pa">
<audio></audio>
<video class="pd-vid" src="https://img.tukuppt.com/video_show/2629112/00/01/92/5b4d9113bffd1.mp4" autoplay loop muted></video>
<ol class="mlist"></ol>
<div class="player rotate" title="Alt+X"></div>
<div class="bgprog"></div>
<div class="btnFs" title="F11"></div>
</div>

<script>
var musics = [
    ['https://music.163.com/song/media/outer/url?id=3352927511', '巫术之夜'],
    ['https://music.163.com/song/media/outer/url?id=2737065326', '循星'],
    ['https://music.163.com/song/media/outer/url?id=2699407860', '开拓者失踪了！'],
    ['https://music.163.com/song/media/outer/url?id=2702732893', '银河出逃计划'],
    ['https://music.163.com/song/media/outer/url?id=2639259069', '彼方之舞'],
    ['https://music.163.com/song/media/outer/url?id=2639259070', '交汇于虹光'],
    ['https://music.163.com/song/media/outer/url?id=2699407859', '开拓者失踪了！(SFX mixed)'],
];

var jsFile = 'https://638183.freep.cn/638183/tzmaker/tz2026m.js';
loadJs(jsFile, tzInit);

function loadJs(url, callback) {
    var 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', musics);
    tz.start();
}
</script>

马黑黑 发表于 2026-3-15 11:44

帖子代码

<style>
@import 'https://638183.freep.cn/638183/tzmaker/tz2026m.css';
.pa { --bg: url('https://638183.freep.cn/638183/t24/6/ls.jpg') no-repeat center/cover; }
.mlist { left: 30px; top: 20px; }
.player { bottom: 50px; width: 120px; height: 120px; background: url('https://638183.freep.cn/638183/small/fi1.webp') no-repeat center/cover; }
.bgprog { bottom: 20px; }
.btnFs { right: 30px; top: 30px; color: lightblue; }
</style>

<div class="pa">
<audio></audio>
<video class="pd-vid" src="https://img.tukuppt.com/video_show/2629112/00/01/92/5b4d9113bffd1.mp4" autoplay loop muted></video>
<ol class="mlist"></ol>
<div class="player rotate" title="Alt+X"></div>
<div class="bgprog"></div>
<div class="btnFs" title="F11"></div>
</div>

<script>
var musics = [
    ['https://music.163.com/song/media/outer/url?id=3352927511', '巫术之夜'],
    ['https://music.163.com/song/media/outer/url?id=2737065326', '循星'],
    ['https://music.163.com/song/media/outer/url?id=2699407860', '开拓者失踪了！'],
    ['https://music.163.com/song/media/outer/url?id=2702732893', '银河出逃计划'],
    ['https://music.163.com/song/media/outer/url?id=2639259069', '彼方之舞'],
    ['https://music.163.com/song/media/outer/url?id=2639259070', '交汇于虹光'],
    ['https://music.163.com/song/media/outer/url?id=2699407859', '开拓者失踪了！(SFX mixed)'],
];

var jsFile = 'https://638183.freep.cn/638183/tzmaker/tz2026m.js';
loadJs(jsFile, tzInit);

function loadJs(url, callback) {
    var 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', musics);
    tz.start();
}
</script>

马黑黑 发表于 2026-3-15 11:46

本帖为 tz2026m 插件的测试帖。


文档：tz2026m : 音乐专辑插件文档 - 马黑黑教程专版 - 花潮论坛 - Powered by Discuz!

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

tz2026m 插件测试效果正常，马老师您辛苦了{:4_180:}

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

这个制作真漂亮，这背景图有意思，明明是太空图，加上视频后，却非常像演唱会的图图。
背景不杂乱，展示歌曲列表特别清爽。歌曲列表和全屏按钮都是鼠标触动才出现的，非常符合需求{:4_199:}

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

有技术讲解，之后就有实例，对于理解讲解内容特别好{:4_199:}

红影 发表于 2026-3-15 17:25

这些音乐都挺奇妙，看音乐名字，应该是说太空的事的吧，我竟然想到了音乐会{:4_173:}

马黑黑 发表于 2026-3-15 19:59

红影 发表于 2026-3-15 17:25
这些音乐都挺奇妙，看音乐名字，应该是说太空的事的吧，我竟然想到了音乐会
这是太空音乐会

马黑黑 发表于 2026-3-15 19:59

红影 发表于 2026-3-15 17:22
有技术讲解，之后就有实例，对于理解讲解内容特别好

感谢管管支持

马黑黑 发表于 2026-3-15 20:01

红影 发表于 2026-3-15 17:21
这个制作真漂亮，这背景图有意思，明明是太空图，加上视频后，却非常像演唱会的图图。
背景不杂乱，展示歌 ...

这是细节改动之一：播放器、全屏按钮、音乐列表全系定时隐藏

马黑黑 发表于 2026-3-15 20:01

杨帆 发表于 2026-3-15 13:40
tz2026m 插件测试效果正常，马老师您辛苦了

这个应该也是刚需

红影 发表于 2026-3-15 23:10

马黑黑 发表于 2026-3-15 19:59
这是太空音乐会

哈哈，你把太空和音乐会合到一起了，更贴切了{:4_173:}

红影 发表于 2026-3-15 23:11

马黑黑 发表于 2026-3-15 19:59
感谢管管支持

这么叫也太生分了吧{:4_173:}

红影 发表于 2026-3-15 23:12

马黑黑 发表于 2026-3-15 20:01
这是细节改动之一：播放器、全屏按钮、音乐列表全系定时隐藏

嗯嗯，这样特别好，让画面变得更清爽{:4_187:}

马黑黑 发表于 2026-3-16 13:43

红影 发表于 2026-3-15 23:12
嗯嗯，这样特别好，让画面变得更清爽

探索一下吧，什么都值得试试

马黑黑 发表于 2026-3-16 13:44

红影 发表于 2026-3-15 23:11
这么叫也太生分了吧

这是恰如其分

马黑黑 发表于 2026-3-16 13:44

红影 发表于 2026-3-15 23:10
哈哈，你把太空和音乐会合到一起了，更贴切了

还好

小辣椒 发表于 2026-3-17 21:50

黑黑这个是隐藏播放器，鼠标滑过，都出来了{:4_199:}

小辣椒 发表于 2026-3-17 21:51

马黑黑 发表于 2026-3-15 11:46
本帖为 tz2026m 插件的测试帖。




又一个插件啊，还是专辑的{:4_199:}

马黑黑 发表于 2026-3-17 22:31

小辣椒 发表于 2026-3-17 21:51
又一个插件啊，还是专辑的

对，专用的
页: [1] 2 3
查看完整版本: 留声音乐