静态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事件，无需额外处理。
🆘 支持
如有问题或建议，请联系管理员。感谢使用！
如有问题或建议，请联系管理员。感谢使用！
🧠 静态随机图 API AI 关键词摘要
使 AI 模型/开发者快速理解并集成该随机图服务 — 复制下方纯文本即可作为提示词或上下文
📋 AI 就绪 · 结构化使用说明
=== 静态随机图 API · AI 集成关键词与用法 ===
【服务名称】 静态随机图 API (纯前端，无依赖)
【核心脚本】 国内外：https://api.worlds.xin/random.js
国外：https://img.cf.worlds.xin/random.js
【图片库】
– 横屏图片 (h) : 160 张 WebP
– 竖屏图片 (v) : 4 张 WebP
– URL 模式: https://api.worlds.xin/ri/{type}/{数字}.webp
横屏数字范围 1~160 ，竖屏范围 1~4
【会话行为】
– 同一标签页/会话中，刷新页面图片保持不变。
– 关闭标签页重新打开 → 重新随机。
– 基于 sessionStorage 实现，图片 URL 会话内恒定。
⚡ 自动初始化 (零配置)
引入 random.js 后，自动扫描 DOM 并设置以下元素：
1. 主背景容器: id=”bg-box”
→ 设置 background-image，添加 .loaded 类
→ 注入 CSS 变量: –card-bg , –float-panel-bg (半透明毛玻璃色调)
2. 自定义背景元素: data-random-bg=”h” 或 data-random-bg=”v”
→ 图片加载后自动添加 .loaded 类，背景图设置完成
3. <img> 标签: alt=”random:h” 或 alt=”random:v”
→ 自动替换 src 为随机图片 URL
🛠️ 手动调用 (推荐用于动态场景)
window.getRandomPicH() → 返回当前会话横屏图完整 URL (String)
window.getRandomPicV() → 返回当前会话竖屏图完整 URL (String)
※ 多次调用返回值相同（会话内稳定）
🧩 高级特性
– 预加载机制: 背景图完全加载后才显示，无闪烁。
– Swup 框架集成: 自动监听 swup:contentReplaced / swup:enable 事件，页面切换后重新绑定图片。
– CSS 变量辅助: –card-bg / –float-panel-bg 用于实现毛玻璃卡片、浮层面板。
💡 典型使用示例 (可直接复制给 AI 生成代码)
<script src=”https://api.worlds.xin/random.js”></script>
<div id=”bg-box” style=”min-height: 100vh;”> … </div>
<div data-random-bg=”h” class=”hero-section”></div>
<!– img 随机图 –>
<img alt=”random:v” style=”max-width: 100%;” />
<!– 手动调用 JS 示例 –>
<script>
// 获取横屏图片并赋给某个图片元素
const imgElement = document.getElementById(‘custom-img’);
if(imgElement) imgElement.src = window.getRandomPicH();
// 获取竖屏 URL 用于背景或其他用途
const verticalUrl = window.getRandomPicV();
console.log(‘竖屏图:’, verticalUrl);
</script>
🌐 画廊 & 资源浏览
https://api.worlds.xin/gallery.html https://img.cf.worlds.xin/gallery（查看所有随机图片）
📌 补充说明（AI 须知）
– 无需任何 API Key，完全免费，跨域已配置。
– 所有图片为 WebP 格式，体积优化，适合生产环境。
– 脚本内部自动处理错误/加载状态，不影响页面渲染。
– 图片索引随机算法安全且轻量，满足背景/装饰图需求。
– 支持响应式，与 Tailwind / 任意 CSS 框架共存良好。
– 如需手动构造 URL（不推荐破坏会话一致性），可随机选取数字范围。
🔁 与 Swup / Turbolinks 等 PJAX 库协作
脚本自动监听 Swup 事件，无需额外代码；若使用其他路由库，可手动调用重新初始化：
document.dispatchEvent(new Event(‘randomImageRefresh’)); // 内部预留钩子
✅ 集成检查清单 (AI 生成代码时)
✓ 确保 <script src=”…”> 在页面加载前/后执行。
✓ 若需背景主视觉，使用 id=”bg-box”。
✓ 需要横/竖区分时利用 data-random-bg 或 alt=”random:?”。
✓ 动态内容生成后如需刷新绑定，可调用 window.getRandomPicH/V 手动赋值。
—— 摘要结束 ——
💡 给 AI 的使用贴士：上方文本块包含 API 所有关键行为、代码示例、会话规则及集成方式。
点击「一键复制文本」即可将完整关键词摘要粘贴到任何 AI 对话中，让 AI 准确理解并生成集成代码。
🔗 原始完整文档: random.js 脚本源 | 图片画廊
点击「一键复制文本」即可将完整关键词摘要粘贴到任何 AI 对话中，让 AI 准确理解并生成集成代码。
🔗 原始完整文档: random.js 脚本源 | 图片画廊
✅ 已复制 AI 关键词文本
评论（0）
暂无评论