马黑黑 发表于 2024-4-30 09:21

canv3dball.js使用说明

canv3dball.js 核心代码是大漠大佬修改另一位大佬的代码而来，我将源码略作封装，可以做一个帖子修饰作品或播放器。

引用与配置：

<script>
    let sF = document.createElement('script');
    sF.src = 'https://638183.freep.cn/638183/web/js/canv3dball.js';
    sF.charset = 'utf-8';
    document.body.appendChild(sF);
    var pa = papa; //指定帖子容器 ：pa 是变量名 papa 是id名
</script>

相关约定：

（一）canvas画布在前台（即帖子中）写好，它应该放在帖子容器里，可以有CSS样式设置宽高以外的属性如定位等，HTML中canvas画布的id必须是 canv，并在代码中指定宽高尺寸（宽高一致）。举例如下：

    <canvas id=“canv” width="240" height="240"></canvas>

（二）立体球的转动与音频做了关联，audio标签要求id为 aud ：

    <audio id="aud" src="音频地址" autoplay loop></audio>

（三）帖子容器需要有一个 id，id名称不论，在js代码中告诉 canv3dball.js 帖子的容器id，以便脚本能够控制关键帧动画（如有）：

    var pa = papa;

其中，pa 是指定的变量名称，等号后面的 papa 是帖子容器 id="papa" 中的 papa。

（四）如果帖子中有视频且希望脚本代管视频的播放暂停，则要求 video 标签的 class 名为 vid，class="vid"，如此，脚本将会将视频与音频的播放暂停进行联动管控。示例：

    <video class="vid" src="视频地址" autoplay loop muted></video>

视频支持多个同时使用，均会一同控制。

帖子示例：

让生命去等候 - 音乐沙龙 - 花潮论坛 - Powered by Discuz! (huachaowang.com)

帖子代码在二楼

南无月 发表于 2024-4-30 12:59

改变画布大小可以改变球体大小。。
width="240" height="240"

还可以控制多个视频，这两个都非常实用。。。。{:4_199:}

马黑黑 发表于 2024-4-30 13:03

南无月 发表于 2024-4-30 12:59
改变画布大小可以改变球体大小。。
width="240" height="240"



下午好

南无月 发表于 2024-4-30 18:02

马黑黑 发表于 2024-4-30 13:03
下午好

马老师喝杯茶呀{:4_190:}

马黑黑 发表于 2024-4-30 18:40

南无月 发表于 2024-4-30 18:02
马老师喝杯茶呀

好滴，谢谢

红影 发表于 2024-4-30 20:16

这个配置的要求不多呢，“画布的id必须是 canv，并在代码中指定宽高尺寸”“容器需要有一个 id”“video 标签的 class 名为 vid”，遵守这些，就可以跟着弄出想要的帖子了呢，太方便了{:4_199:}

马黑黑 发表于 2024-4-30 20:49

红影 发表于 2024-4-30 20:16
这个配置的要求不多呢，“画布的id必须是 canv，并在代码中指定宽高尺寸”“容器需要有一个 id”“video 标 ...

好的约定可以减少配置量

南无月 发表于 2024-4-30 20:50

马黑黑 发表于 2024-4-30 18:40
好滴，谢谢

刚试了一下把编辑器里的歌词代码直接添上。。
很好用啊。。
小播直接三方可控。
小白觉得太友好了{:4_173:}

马黑黑 发表于 2024-4-30 20:52

南无月 发表于 2024-4-30 20:50
刚试了一下把编辑器里的歌词代码直接添上。。
很好用啊。。
小播直接三方可控。


是不是呀小白同志

红影 发表于 2024-5-1 00:03

马黑黑 发表于 2024-4-30 20:49
好的约定可以减少配置量

是的，使用起来更方便了。

马黑黑 发表于 2024-5-1 07:37

红影 发表于 2024-5-1 00:03
是的，使用起来更方便了。

大漠大佬主要强悍在CSS，他是中国的CSS教父

红影 发表于 2024-5-1 08:45

马黑黑 发表于 2024-5-1 07:37
大漠大佬主要强悍在CSS，他是中国的CSS教父

这么厉害啊，太牛了{:4_199:}

马黑黑 发表于 2024-5-1 09:06

红影 发表于 2024-5-1 08:45
这么厉害啊，太牛了

之前介绍过他的

红影 发表于 2024-5-1 09:59

马黑黑 发表于 2024-5-1 09:06
之前介绍过他的

代码界的翘楚。

马黑黑 发表于 2024-5-1 10:59

红影 发表于 2024-5-1 09:59
代码界的翘楚。

大漠大佬的能耐主要是在CSS方面，他写的CSS是无从挑剔的

红影 发表于 2024-5-1 12:53

马黑黑 发表于 2024-5-1 10:59
大漠大佬的能耐主要是在CSS方面，他写的CSS是无从挑剔的

完美无缺{:4_205:}

马黑黑 发表于 2024-5-1 17:10

红影 发表于 2024-5-1 12:53
完美无缺

是滴

红影 发表于 2024-5-2 15:52

马黑黑 发表于 2024-5-1 17:10
是滴

也是花费了很多心力的。

马黑黑 发表于 2024-5-2 20:59

红影 发表于 2024-5-2 15:52
也是花费了很多心力的。

这是不能省略的

红影 发表于 2024-5-2 23:08

马黑黑 发表于 2024-5-2 20:59
这是不能省略的

必须给大佬点赞{:4_187:}
页: [1] 2
查看完整版本: canv3dball.js使用说明