Reveal.js example

REVEAL.JS 示例中文标注解释版

Created by Fwolf, .2013

演示注解reveal.js 支持在演示的同时，为演示人显示注解。

使用用“s”键打开注解窗口，例子图：

分支页可以进行垂直分页，一般用于对某一演示页进行详细阐述。无论位于垂直分页的哪一页，都可以用左右键正常（水平）

滚动。试试

垂直分页 1下面还有一页。

垂直分页 2通过文档内部链接，可以。

通过特殊链接，可以。

返回垂直分页的顶页

返回上一页

简单的内容结构

在一个好模板的帮助下，不懂编程也能轻松掌握。或者也可以试试在线编辑器：

<div class="reveal"> <div class="slides"> <section> <h2>页面标题</h2> <p>页面内容</p> </section> </div></div>

http://slid.es

支持 MARKDOWN 标记语言Markdown 语言支持的官方例子在。

Markdown 标记语言编写的内容，好像不支持垂直（子）分页。<script> 之外的内容会被忽略。

这里

<section datamarkdown> <script type="text/template">

</script></section>

## 支持 Markdown 标记语言

Markdown 语言支持的官方例子在 [这里](https://github.com/hakimel/reveal.js#markdown)。

视角切换按 ESC 会进入全局视图.

按住 ALT 键同时点击任意元素，可以放大并聚焦在它上面，按住 ALT 键同时点击任意地方返回。这里用到了。zoom.js

支持手机浏览还支持手机上的划屏切换和手势放大、缩小。

无序列表列表项 1列表项 2列表项 3列表项 4

有序列表1. 列表项 12. 列表项 23. 列表项 34. 列表项 4

外观样式Reveal.js 自带以下样式：

* 样式定义的引用应当放在 <head> 区域，使用用 <link> 标记。

Sky Beige Simple

Serif Night Default

翻页动画样式可以通过下面的链接更换：

- - - - - -

-

Cube 盒子外翻 Page 翻页 Concave 凹面Zoom 放大 Linear 平面 Fade 淡出

None 无动画 Default 默认，凸面

演示页独立样式在某个演示页的 section 中加入 data

state=class_name 标记， class_name 就会成为该演示

页的 class，从而实现特定演示页的样式定制。

样式 "BLACKOUT"

样式 "SOOTHE"

自定义事件通过 datastate 还可以在特定演示页触发自定义事件。

Reveal.addEventListener( 'customevent', function() console.log( '"customevent" has fired' ); );

灵活的引用引用分为两种，行内引用： “The nice thing about standards is

that there are so many to choose from” 和块引用：

“For years there has been a theory thatmillions of monkeys typing at random on

millions of typewriters would reproduce theentire works of Shakespeare. The Internet has

proven this theory to be untrue.”

代码高亮

使用实现。

function linkify( selector ) if( supports3DTransforms )

var nodes = document.querySelectorAll( selector );

for( var i = 0, len = nodes.length; i < len; i++ ) var node = nodes[i];

if( !node.className ) ) node.className += ' roll'; ;

highlight.js

内部链接前面已经演示过了，比如链接到垂直页面 2 的第 3 分页：

。点这里

分步显示请按右箭头...

... 一步一步来 ...

1. 这2. 就是3. 分步显示

分步显示样式内置了这么多种样式：

grow 放大

shrink 缩小

roll-in 翻入

fade-out 淡出

highlight-red 红色高亮

highlight-green 绿色高亮

highlight-blue 蓝色高亮

输出成 PDF演示文稿可以 , 下面是这个文稿转换输出后的例

子，存放在 SlideShare 上。

输出成 PDF

暂停一下按一下 b 键，可以进入暂停模式，屏幕不显示任何内容，这样演讲人可以把听众的注意力从演示内容中吸引过来。再次

按 b 键恢复。

结束了想不想亲自试试？

Documents

Reveal.js example