人类遗产
本帖最后由 马黑黑 于 2025-4-29 11:37 编辑 <br /><br /><div id="ma"><iframe src="https://file.uhsea.com/2504/c005c5f028841bd6c4c924ca4211fbdeR9.html" name="ifr" seamless allowfullscreen></iframe>
</div>
<style>
#ma { margin: 30px 0 0 calc(50% - 681px); width: 1200px; height: 700px; box-shadow: 2px 2px 8px #000; z-index: 2; position: relative; }
#ma > iframe { width: 100%; height: 100%; border: 0; }
</style>
<script>
var screenwidth = window.screen.width;
if (screenwidth < 1280) ma.style.cssText += `transform: scale(${screenwidth / 1200});`;
</script>
本帖最后由 马黑黑 于 2025-4-29 11:49 编辑 <br /><br /><div id="hEdiv"><pre id="hEpre">
<div id="ma">
<iframe src="https://file.uhsea.com/2504/c005c5f028841bd6c4c924ca4211fbdeR9.html" name="ifr" seamless allowfullscreen></iframe>
</div>
<style>
#ma { margin: 30px 0 0 calc(50% - 681px); width: 1200px; height: 700px; box-shadow: 2px 2px 8px #000; z-index: 2; position: relative; }
#ma > iframe { width: 100%; height: 100%; border: 0; }
</style>
<script>
var screenwidth = window.screen.width;
if (screenwidth < 1280) ma.style.cssText += `transform: scale(${screenwidth / 1200});`;
</script>
</pre></div>
<script type="module">
import hlight from 'https://638183.freep.cn/638183/web/helight/helight1.js';
hlight.hl(hEdiv, hEpre);
</script> 本帖最后由 马黑黑 于 2025-4-29 12:28 编辑
首先说一下 iframe 页面（源）的制作：
一、设置 iframe 的 body 标签外边距 margin 为 0，以保证被帖子 iframe 后四周不留空白；
二、可以像做帖子那样制作 iframe 页面，暂时不建议考虑适配不同显示设备的问题，爱设置为多大尺寸就多大尺寸即可。下面是代码参考样式：
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Human Legacy</title>
</head>
<body>
<style>
@import 'https://638183.freep.cn/638183/web/ku/xyccpp_lrc.css';
body { margin: 0; }
#papa { margin: 0; width: 1200px; height: 700px; background: #000 url('https://638183.freep.cn/638183/t24/webp3/hmlg.webp') no-repeat center/cover; animation: flashing .2s linear infinite alternate var(--state); }
#mplayer { --ppnum: 100; --pplen: 3px; --ppcap: lightyellow; --ppxx: -50px; --ppyy: 0; --ppcolor: none; bottom: 35%; }
#lrcDiv { bottom: 20px; }
#btnFs { bottom: 20px; }
</style>
<div id="papa" class="pa">
<audio src="https://file.uhsea.com/2504/07a5f10284a8ec83cf90b31c4173eb1bR8.mp3" autoplay loop></audio>
<video class="vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/05/14/09/44/video6365fe284f3d1.mp4" autoplay loop muted></video>
</div>
<script type="module">
import { ccPlay } from 'https://638183.freep.cn/638183/web/ku/xyccpp_lrc.js';
ccPlay(papa);
</script>
</body>
</html>
注意CSS属性的 body {} 和 #papa {} 的 margin 属性，都是设置为 0，同时注意观察 #papa 选择器的宽高设置。
这个 iframe 页面保存的虚拟空间，应和mp3资源所在虚拟空间是同一个空间，所以可以先上传mp3，拿到MP3的地址后写在 audio 标签的 src 属性中。然后在上传这个 iframe 文档，文档名称根据自己的意愿命名，比方说是 123.html，上传到上传mp3的那个空间，拿到地址后，就可以使用后面介绍的代码发到论坛来。
二、帖子代码
<div id="ma">
<iframe src="https://file.uhsea.com/2504/c005c5f028841bd6c4c924ca4211fbdeR9.html" name="ifr" seamless allowfullscreen></iframe>
</div>
<style>
#ma { margin: 30px 0 0 calc(50% - 681px); width: 1200px; height: 700px; box-shadow: 2px 2px 8px #000; z-index: 2; position: relative; }
#ma > iframe { width: 100%; height: 100%; border: 0; }
</style>注意 iframe 标签的属性 allowfullscreen ，它的作用是允许全屏，没有它，iframe源的全屏按钮将不起作用甚至会出错。
三、适配大小显示器
这个，以上面的设计思路，只能通过 JS 来实现适配不同的显示终端，方法是检测 window.screen.width，如果它的值小于常规显示器分别率的 1280，就让 id="ma" 的帖子容器元素按 设备宽度/1200 的比例进行缩小，其中的 1200 是帖子也是iframe源的宽度。代码如下：
<script>
var screenwidth = window.screen.width;
if (screenwidth < 1280) ma.style.cssText += `transform: scale(${screenwidth / 1200});`;
</script>以上就是使用 iframe 发帖的基本流程了。至于响应式频谱的制作，我在下一楼会继续介绍，敬请期待。
本帖最后由 马黑黑 于 2025-4-29 13:01 编辑
制作响应式频谱页面：
一、在本地制作 iframe 源
假设你在 D盘 有一个名叫“帖子”的目录，即 d:\帖子，那么，将 iframe源 文档，也就是上一楼第一组代码，命名为你想要的文件名，例如是 123.html，保存到 d:\帖子 目录里。确保该目录还有帖子所使用的MP3文件，假如是 爱你爱不完.mp3 吧。然后，你将 123.html 代码中的 audio 标签的 src 值暂时替换为 爱你爱不完.mp3 ：
<audio src="爱你爱不完.mp3" autoplay loop></audio>
保存后用浏览器打开它，因为跨域问题你将听不到声音也看不到频谱，但是，如果播放进度在变化、视频在播放，而且点击暂停按钮有相应，那么，这一切是正常的，只不过现在它处于哑剧状态而已，你要做的事情是进一步调整 123.html 的其它方面，比如宽高、背景图片、视频、需要加什么元素等等，都弄好了之后，重点来了——
（1）上传MP3到你的支持 https 协议、支持上传 HTML 文档的空间（可以再网上找找，会有），上传完了复制mp3地址；
（2）将复制到的mp3地址替换 audio 标签的 src 爱你爱不完.mp3 => 新地址，保存；
（3）上传已经更换了新MP3地址的 123.html 文档，拿到地址后就OK。
二、在本地测试帖子
可以再本地任意目录制作帖子，代码像上一楼的第二组代码即“帖子代码”，存为本地文档，例如 帖子1.html，运行它，一切正常的话该有的都会有。
PS：关于 屋舍 - 您最可靠的永久高速网络文件柜
屋舍服务器在日本。创建者承诺永不删除用户上传的文件。如果需要使用，为了方便，建议注册，一切免费。它的优点是游客也可以上传很大的单个文件（100MB以内），注册后单个文件限制在500MB内；缺点是，国内连接速度一般、文件上传后不可以更改（包括删除）。
音乐和iframe源在屋舍 屋舍 - 您最可靠的永久高速网络文件柜 ，服务器非境内，连接速度取决于访客所使用的网络环境，我这里测试了中国移动和中国电信均正常。 问好黑黑老师，老师用的空间代码是屋舍吗？ 梦江南 发表于 2025-4-29 11:51
问好黑黑老师，老师用的空间代码是屋舍吗？
老师不是在你楼上说了么 火狐浏览器不信任屋舍，指出屋舍的安全证书已经被吊销。所以，如果使用火狐浏览器，屋舍的资源是无法打开的 这个还是彩色频谱呢，更漂亮了。{:4_187:} 这样折腾一圈后，就能保证是响应式频谱了吧，这个厉害了{:4_199:} 红影 发表于 2025-4-29 17:01
这个还是彩色频谱呢，更漂亮了。
这说明你能正常打开帖子{:4_170:} 红影 发表于 2025-4-29 17:01
这样折腾一圈后，就能保证是响应式频谱了吧，这个厉害了
目前暂且酱紫处理。难题在于支持 HTML 和 音频 上传的空间。中午去转了一圈，这样的空间境外的有，但是支持外链的多数仅限于图片，这可能和音乐的产权有关吧，不好找到比较理想的 这个代码好神奇，太漂亮了{:4_199:}{:4_187:} 小九 发表于 2025-4-29 19:07
这个代码好神奇，太漂亮了
你也看到了？
晚上好 我怎么听不见声音呵{:4_203:} 马黑黑 发表于 2025-4-29 11:26
音乐和iframe源在屋舍 屋舍 - 您最可靠的永久高速网络文件柜 ，服务器非境内，连接速度取决于访客所使用的 ...
感谢马老师探索出一条发网页贴的新路，老师您辛苦了！{:4_191:} 画面漂亮，可惜没有音乐 感谢分享 樵歌 发表于 2025-4-29 19:58
我怎么听不见声音呵
你试一下这里：
https://file.uhsea.com/2504/c005c5f028841bd6c4c924ca4211fbdeR9.html
如果还不行，只能说明你的宽度接入和这个空间无缘了 世外桃源 发表于 2025-4-29 21:01
画面漂亮，可惜没有音乐
试一下这个链接看看行不行：
https://file.uhsea.com/2504/c005c5f028841bd6c4c924ca4211fbdeR9.html