在 Devin 中试用 DeepWiki 处理私有仓库
DeepWiki

hakimel/reveal.js

菜单

示例

相关源文件

本页提供了一系列 reveal.js 演示示例，从基础实现到特定功能的演示。在这里，您将找到说明常见用法模式的实用示例，以帮助您创建自己的演示文稿。有关 reveal.js 功能的一般信息，请参阅主要功能。

基础演示示例

最基本的 reveal.js 演示文稿仅需要几个元素

此 HTML 结构直接映射到演示幻灯片

来源： index.html17-22 index.html24-37

基础初始化示例

最少的初始化，包含必需的插件

配置选项目的示例值
hash启用幻灯片 URL/导航true, false
controls显示导航箭头true, false
progress显示进度条true, false
center水平居中幻灯片true, false
transition幻灯片过渡样式"none", "fade", "slide", "convex"
plugins启用特定插件[ RevealMarkdown, RevealHighlight ]

来源： index.html32-37 demo.html487-495

幻灯片结构示例

水平幻灯片

默认导航方向为水平方向

垂直幻灯片

嵌套 <section> 元素以创建垂直幻灯片

来源： demo.html49-71

内容功能示例

Markdown 支持

使用 markdown 进行幻灯片内容需要 markdown 插件

来源： demo.html182-198

片段示例

片段允许内容逐个出现

可用的片段样式

  • fade-in (默认)
  • fade-out
  • fade-up
  • fade-down
  • fade-left
  • fade-right
  • fade-in-then-out
  • fade-in-then-semi-out
  • grow
  • shrink
  • highlight-red/blue/green

来源： demo.html225-250

自动动画示例

自动动画在具有匹配元素的幻灯片之间进行过渡

自动动画通过匹配幻灯片之间具有相同 data-id 属性的元素来实现。

来源： demo.html149-173

讲者备注示例

为演示者添加私有备注

来源： demo.html411-418

来源： demo.html

幻灯片背景示例

纯色背景

渐变背景

图片背景

视频背景

Iframe 背景

来源： demo.html286-340

主题示例

reveal.js 附带了几个内置主题

可用主题

  • black (默认)
  • white
  • league
  • beige
  • sky
  • night
  • serif
  • simple
  • solarized
  • blood
  • moon

demo.html 文件包含动态切换主题的代码：demo.html266-283

高级功能示例

元素灯箱

将图片或视频转换为灯箱

来源： demo.html201-217

响应式文本

自动缩放以适应的文本

来源： demo.html220-222

自定义事件

来源： demo.html435-445

完整的示例模板

最小化演示

一个完整的最小化演示示例

来源： index.html

带有插件的演示

一个完整的插件示例

来源： index.html

来源： index.html demo.html

完整功能演示

该仓库包含一个全面的演示文稿，展示了所有功能

  1. 在 demo.html 访问完整的演示。
  2. 浏览源代码以查看实现示例
  3. 将其作为您自己演示文稿的参考

关键演示部分

您也可以在主 README 文件中找到功能的完整列表：README.md10-12