A Quartet（四重奏）

马黑黑 发表于 2026-4-14 12:16

马黑黑 发表于 2026-4-14 12:17

帖子代码

<style>
@import 'https://638183.freep.cn/638183/tzmaker/tz2026m.css';
.pa { --bg: url('https://638183.freep.cn/638183/t24/6/qcen.jpg') no-repeat center/cover; }
.mlist { left: 30px; bottom: 10px; background: rgba(0,0,0,.15); backdrop-filter: blur(10px); }
.player { top: 5%; border-radius: 50%; box-shadow: 0 0 16px rgba(0,0,0,.5); filter: invert(1); opacity: .35; transition: .5s; }
.player:hover { filter: unset; }
.bgprog { bottom: 20px; color: lightblue; }
.btnFs { right: 30px; top: 30px; color: lightblue; }
.pd-vid { mix-blend-mode: screen; opacity: 1; }
</style>

<div class="pa">
<audio></audio>
<video class="pd-vid" src="https://img.tukuppt.com/video_show/2405811/00/73/37/608ca8165fa3d.mp4" autoplay loop muted></video>
<ol class="mlist"></ol>
<img src="https://638183.freep.cn/638183/t24/6/qs.jpg" class="player rotate" title="Alt+X" alt="">
<div class="bgprog"></div>
<div class="btnFs" title="F11"></div>
</div>

<script>
var musics = [
['https://music.163.com/song/media/outer/url?id=2057415380', 'Dancing Soul - 舞动的灵魂'],
['https://music.163.com/song/media/outer/url?id=2057417727', 'Queen\'s Speech - 女王致辞'],
['https://music.163.com/song/media/outer/url?id=2057415381', 'From the Clouds - 来自云端'],
['https://music.163.com/song/media/outer/url?id=2057415382', 'Spread Wings - 展翅'],
['https://music.163.com/song/media/outer/url?id=2057415383', 'Marching East - 东进']
];

loadJs('https://638183.freep.cn/638183/tzmaker/tz2026m.js', 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-4-14 12:23

24行：

歌名中有小角引号（英文分隔符） , 所以在其前面加一个转义符号 \ （反斜杠）。也可以改用双引号组织歌名，这样分隔符就不用做额外处理。

梦江南 发表于 2026-4-14 12:24

黑黑老师，这个是音乐专辑的代码，赞哦！{:4_187:}

马黑黑 发表于 2026-4-14 12:26

给小播（.player 选择器）加一个 opacity 属性设置，值随意，酱紫小播就不会自动隐藏。这是 tz2026(m) 插件的旁门小技巧。

马黑黑 发表于 2026-4-14 12:27

小播图案提取自专辑封面

马黑黑 发表于 2026-4-14 12:29

梦江南发表于 2026-4-14 12:24
黑黑老师，这个是音乐专辑的代码，赞哦！

代码是音画帖快手生成

梦江南 发表于 2026-4-14 12:30

马黑黑发表于 2026-4-14 12:29
代码是音画帖快手生成

哦，这个没试过。

马黑黑 发表于 2026-4-14 12:36

梦江南发表于 2026-4-14 12:30
哦，这个没试过。

音画帖快手是代码形式的工具，还是需要具备一定的 CSS、HTML、JS 知识，以便修改相应代码

山人发表于 2026-4-14 12:51

欧耶

杨帆发表于 2026-4-14 13:36

代码简洁，内容丰富，效果精彩，谢谢马老师经典示范{:4_180:}

马黑黑 发表于 2026-4-14 13:41

杨帆发表于 2026-4-14 13:36
代码简洁，内容丰富，效果精彩，谢谢马老师经典示范

{:4_191:}

红影发表于 2026-4-14 21:06

马黑黑发表于 2026-4-14 12:23
24行：

歌名中有小角引号（英文分隔符） ,所以在其前面加一个转义符号\ （反斜杠）。也可以改用双 ...

封装的代码里一些细节仍是需要注意的呢{:4_187:}

红影发表于 2026-4-14 21:08

马黑黑发表于 2026-4-14 12:26
给小播（.player 选择器）加一个 opacity 属性设置，值随意，酱紫小播就不会自动隐藏。这是 tz2026(m) 插件 ...

这也是个小细节呢。
这么多好音乐，好听，欣赏黑黑好帖{:4_187:}

马黑黑 发表于 2026-4-14 21:38

红影发表于 2026-4-14 21:06
封装的代码里一些细节仍是需要注意的呢

这个细节本质上是JS以及多数其他语言的引号的嵌套使用技巧。一般遵循这样的范式：

双引号做外层包裹，里面可以使用单引号，反之已然；
反引号做外层包裹，里面可以随意使用双引号、单引号。

PHP还有 nowdoc 组织字串，里面的引号随意使用。

马黑黑 发表于 2026-4-14 21:38

红影发表于 2026-4-14 21:08
这也是个小细节呢。
这么多好音乐，好听，欣赏黑黑好帖

这时对漏洞的应用{:4_170:}

红影发表于 2026-4-15 21:07

马黑黑发表于 2026-4-14 21:38
这个细节本质上是JS以及多数其他语言的引号的嵌套使用技巧。一般遵循这样的范式：

双引号做外层包裹， ...

这引号的嵌套使用真好，里面可以夹带私货了{:4_173:}

红影发表于 2026-4-15 21:24

马黑黑发表于 2026-4-14 21:38
这时对漏洞的应用

让小播显示怎么是对漏洞的应用？

马黑黑 发表于 2026-4-15 21:44

红影发表于 2026-4-15 21:07
这引号的嵌套使用真好，里面可以夹带私货了

反正编程语言里引号的嵌套有一整套规矩，用不好就会出错

马黑黑 发表于 2026-4-15 21:45

红影发表于 2026-4-15 21:24
让小播显示怎么是对漏洞的应用？

就是说，自动隐藏的实现机制忽略了一些小细节，但无伤大雅，所以也不打算去修改

页: [1] 2 3

花潮论坛's Archiver

A Quartet（四重奏）