静态api①：https://api.worlds.xin/random.js
静态api②：https://img.cf.worlds.xin/random.js
动态api：https://img.api.yanjiu.xin/index.php?type=h(v)
🖼️ 静态随机图 API 使用文档
感谢使用静态随机图 API！这是一个纯前端的随机图片解决方案，只需在页面中引入一个 JS 文件，即可自动为背景、图片元素设置随机图像，并支持手动调用获取图片 URL。
🚀 快速开始
在你的 HTML 页面中引入以下脚本（建议放在 <head> 或 </body> 前）：
<script src="https://api.worlds.xin/random.js"></script>无需任何配置，脚本加载后会自动初始化页面中符合条件的元素。
🖼️ 功能特性
- 会话保持：同一标签页内，横屏/竖屏图片在整个会话中保持不变（刷新页面不会变化，重新打开页面会更新）。
- 自动预加载：背景图会在完全加载后才显示，避免闪烁。
- CSS 变量支持：为主背景自动设置透明效果变量。
- Swup 集成：自动监听 Swup 页面切换事件，重新初始化图片。
📝 使用方式
1. 设置主背景（定制版）
如果你希望为页面设置一个横屏背景图，并自动获得透明效果相关的 CSS 变量，只需在页面中添加一个 id 为 bg-box 的元素：
<div id="bg-box" class="transition-opacity duration-500 opacity-0 loaded:opacity-100">
<!-- 你的页面内容放在这里 -->
</div>- 图片加载成功后，
bg-box会自动添加loaded类名，并设置background-image。 - 同时会设置两个 CSS 变量：
--card-bg和--float-panel-bg（透明版本），方便你实现毛玻璃等效果。
2. 设置通用背景图（备用方案）
如果需要为页面中的其他元素设置随机背景，可以使用 data-random-bg 属性，并指定类型：
<!-- 横屏背景 -->
<div data-random-bg="h" class="bg-element">...</div>
<!-- 竖屏背景 -->
<div data-random-bg="v" class="bg-element">...</div>图片加载成功后，该元素也会被添加 loaded 类名。
3. 设置普通图片
对于 <img> 标签，通过 alt 属性指定类型：
<!-- 横屏图片 -->
<img alt="random:h" />
<!-- 竖屏图片 -->
<img alt="random:v" />4. 手动调用（高级）
脚本在 window 对象上暴露了两个函数，供你手动获取随机图片 URL（返回值在当前会话中保持一致）：
// 获取横屏图 URL
const hUrl = window.getRandomPicH();
// 获取竖屏图 URL
const vUrl = window.getRandomPicV();
// 示例：手动设置图片
document.getElementById('my-image').src = hUrl;🖼️ 画廊页面
你可以通过以下链接浏览所有已上传的随机图片：
👉 https://api.worlds.xin/gallery.html
⚙️ 技术细节
- 图片总数：横屏 160 张，竖屏 4 张。
- 图片格式：WebP。
- URL 格式：
https://api.worlds.xin/ri/{type}/{数字}.webp（type为h或v）。 - 脚本仅依赖浏览器原生 API，无任何外部依赖。
📌 注意事项
- 图片库由服务端维护，如需更新请联系管理员重新运行构建脚本。
- 由于是静态 API，不支持动态上传或删除图片。
- 若页面使用了 Swup，脚本会自动监听
swup:contentReplaced和swup:enable事件，无需额外处理。
🆘 支持
如有问题或建议，请联系管理员。感谢使用！
如有问题或建议，请联系管理员。感谢使用！
评论（0）
暂无评论