论坛 › 动画音画 › 心弦

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

心弦

<style>
@import 'https://638183.freep.cn/638183/tzmaker/tz2026.css?v2';
.pa { --bg: url('https://638183.freep.cn/638183/t24/w8/xbxm.webp') no-repeat center/cover; }
.player { top: 5%; width: 120px; height: 120px; }
.bgprog { bottom: 20px; right: 100px; color: lightblue; }
.btnFs { left: 20px; bottom: 20px; color: lightblue; }
</style>

<div class="pa">
<audio src="https://music.163.com/song/media/outer/url?id=423058298" autoplay loop></audio>
<video class="pd-vid" src="https://img.tukuppt.com/video_show/2418175/00/02/06/5b500bc3cfd48.mp4" autoplay loop muted></video>
<img class="player rotate" src="https://638183.freep.cn/638183/web/svg/6p.svg" title="Alt+X">
<div class="bgprog"></div>
<div class="btnFs" title="F11"></div>
</div>

<script>
var jsFile = 'https://638183.freep.cn/638183/tzmaker/tz2026.min.js?v2';
loadJs(jsFile, tzInit);

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

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

帖子代码

<style>
@import 'https://638183.freep.cn/638183/tzmaker/tz2026.css?v2';
.pa { --bg: url('https://638183.freep.cn/638183/t24/w8/xbxm.webp') no-repeat center/cover; }
.player { top: 5%; width: 120px; height: 120px; }
.bgprog { bottom: 20px; right: 100px; color: lightblue; }
.btnFs { left: 20px; bottom: 20px; color: lightblue; }
</style>

<div class="pa">
<audio src="https://music.163.com/song/media/outer/url?id=423058298" autoplay loop></audio>
<video class="pd-vid" src="https://img.tukuppt.com/video_show/2418175/00/02/06/5b500bc3cfd48.mp4" autoplay loop muted></video>
<img class="player rotate" src="https://638183.freep.cn/638183/web/svg/6p.svg" title="Alt+X">
<div class="bgprog"></div>
<div class="btnFs" title="F11"></div>
</div>

<script>
var jsFile = 'https://638183.freep.cn/638183/tzmaker/tz2026.min.js?v2';
loadJs(jsFile, tzInit);

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

杨帆 发表于 2026-3-16 20:24

漂亮~谢谢马老师精彩示范{:4_180:}

山人 发表于 2026-3-16 20:30

loadJs() 函数有一个 const 关键字，它并不影响评分后刷新机制的继承。

原因：const 声明变量关键字作用域在 function 函数内，Discuz! 评分机制支持 function 函数的刷新继承性、不管函数体具体内容。

但如果 const 声明用于全局作用域，这会出问题。

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

这乐曲里好像有小孩的哭声？这小播像螺旋桨，被放在人物的头上了{:4_173:}

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

这个版本的封装也是鼠标触动才出现的小播以及进度条和全屏标志呢{:4_204:}

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

杨帆 发表于 2026-3-16 20:24
漂亮~谢谢马老师精彩示范

感谢支持

马黑黑 发表于 2026-3-16 21:57

红影 发表于 2026-3-16 21:15
这乐曲里好像有小孩的哭声？这小播像螺旋桨，被放在人物的头上了

这时起航必备

马黑黑 发表于 2026-3-16 21:58

红影 发表于 2026-3-16 21:17
这个版本的封装也是鼠标触动才出现的小播以及进度条和全屏标志呢

小播、进度条、全屏按钮全系

红影 发表于 2026-3-18 11:49

马黑黑 发表于 2026-3-16 21:57
这时起航必备

起航必备，哈哈，这是要发送到外星么{:4_189:}

红影 发表于 2026-3-18 11:49

马黑黑 发表于 2026-3-16 21:58
小播、进度条、全屏按钮全系

嗯嗯，配套的。

马黑黑 发表于 2026-3-18 14:33

红影 发表于 2026-3-18 11:49
嗯嗯，配套的。

音画帖人，尤其是高度依赖PS的音画帖作者，非常真爱自己的图像作品，不想在其上有太多的东东。业内称这种倾向选取为洁癖

马黑黑 发表于 2026-3-18 14:33

红影 发表于 2026-3-18 11:49
起航必备，哈哈，这是要发送到外星么

有必要的话

了了子 发表于 2026-3-18 21:08

欣赏马老师美贴，点赞学习！{:4_191:}

马黑黑 发表于 2026-3-18 21:15

了了子 发表于 2026-3-18 21:08
欣赏马老师美贴，点赞学习！

从未签到的朋友，晚上好！

红影 发表于 2026-3-21 16:06

马黑黑 发表于 2026-3-18 14:33
音画帖人，尤其是高度依赖PS的音画帖作者，非常真爱自己的图像作品，不想在其上有太多的东东。业内称这种 ...

所以这个封装就是考虑这种洁癖的吧。

红影 发表于 2026-3-21 16:07

马黑黑 发表于 2026-3-18 14:33
有必要的话

发射完了这人就不见了啊{:4_173:}

马黑黑 发表于 2026-3-21 20:02

红影 发表于 2026-3-21 16:07
发射完了这人就不见了啊

也未尝不可

马黑黑 发表于 2026-3-21 20:03

红影 发表于 2026-3-21 16:06
所以这个封装就是考虑这种洁癖的吧。

嗯，采纳其理念

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

马黑黑 发表于 2026-3-21 20:03
嗯，采纳其理念

其实，很多时候小播也可以当做页面的点缀的。

查看完整版本: 心弦