人类遗产

马黑黑 · 发表于 2025-4-29 11:20

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2025-4-29 11:37 编辑

马黑黑 · 发表于 2025-4-29 11:21

本帖最后由马黑黑于 2025-4-29 11:49 编辑

<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:21

本帖最后由马黑黑于 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 11:21

本帖最后由马黑黑于 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内；缺点是，国内连接速度一般、文件上传后不可以更改（包括删除）。