Reveal.js一個用來做WEB演示文稿的框架

reveal.js是一個能夠幫助我們很輕易地使用HTML來創建漂亮的演示效果，也就是我們常見的PPT幻燈片。reveal.js不依賴其他任何javascript庫，是一個獨立的javascript插件庫。它提供了多種幻燈片過渡效果，是一個非常棒的在線演示庫。

reveal.js還擁有許多高級特性，完整安裝，某些 reveal.js 的功能，像外部的Markdown和演講注釋，需要演示文稿運行在本地的一個web服務器上，因此需要在nodejs環境下運行，安裝node.js以及grunt，稍微比較復雜。本文采用簡單安裝，結合本站實例，使用reveal.js實現演示文稿的功能。

HTML

我們先引入主要的CSS文件以及js文件。CSS文件要在head內就載入，而reveal.js可以在</body>>前載入。

<link rel="stylesheet" href="css/reveal.css">
<link rel="stylesheet" href="css/theme/moon.css">
<script src="js/reveal.js"></script>

HTML標記的層次結構需要是 .reveal > .slides > section 這樣的，<section> 代表一個幻燈片並且能夠被無限地重復。如果我們將多個 <section> 放到另一個 <section>的內部，它們將會以垂直幻燈片的方式顯示。<section>內部可以是文本、圖片、多媒體等任意HTML內容。例如：

<div class="reveal">
    <div class="slides">
        <section>slide1</section>
        <section>slide2</section>
    </div>
</div>

Javascript

在頁面最后，我們需要運行下面的代碼來初始化幻燈片。注意，所有的配置的值都是可選的，下面展示的都是默認值：

<script>
Reveal.initialize({
    // 是否在右下角展示控制條
    controls: true,
    // 是否顯示演示的進度條
    progress: true,
    // 是否顯示當前幻燈片的頁數
    slideNumber: 'c/t'
});
</script>

以上代碼實現了可以允許右下角的控制條控制切換展示幻燈片、並顯示演示幻燈片的進度條，以及顯示幻燈片的頁碼。

選項設置

參數	描述	默認值
controls	是否在右下角展示控制條	true
progress	是否顯示演示的進度條	true
slideNumber	是否顯示當前幻燈片的頁數編號，也可以使用代碼slideNumber: 'c / t' ，表示當前頁/總頁數。	false
history	是否將每個幻燈片改變加入到瀏覽器的歷史記錄中去	false
keyboard	是否啟用鍵盤快捷鍵來導航	true
overview	是否啟用幻燈片的概覽模式，可使用"Esc"或"o"鍵來切換概覽模式	true
center	是否將幻燈片垂直居中	true
touch	是否在觸屏設備上啟用觸摸滑動切換	true
loop	是否循環演示	false
rtl	是否將演示的方向變成RTL，即從右往左	false
fragments	全局開啟和關閉碎片。	true
autoSlide	兩個幻燈片之間自動切換的時間間隔（毫秒），當設置成 0 的時候則禁止自動切換，該值可以被幻燈片上的 ` data-autoslide` 屬性覆蓋	0
transition	切換過渡效果，有none/fade/slide/convex/concave/zoom	'default'
transitionSpeed	過渡速度，default/fast/slow	'default'
mouseWheel	是否啟用通過鼠標滾輪來切換幻燈片	true

此外，reveal.js還提供了全屏模式，只需要在鍵盤上點擊 »F« 按鍵即可進入全屏模式，點擊 »ESC« 按鍵可退出全屏模式。

reveal.js還有一個片段概念，片段被用來在一個幻燈片中來突出顯示單獨的一個元素。每一個帶有 fragment 樣式的元素將會在切換到下一個幻燈片之前被走過。默認的片段樣式是開始不可見，然后淡入，我們可以將同一張幻燈片里的多個段落分作多個片段，並給他們加上.fragment樣式即可，就像DEMO演示中的：

<section>
    <h2>幻燈片切換方式</h2>
    <p class="fragment">右下角控制條控制切換</p>
    <p class="fragment">可以使用鍵盤方向鍵操作</p>
    <p class="fragment">可以設置使用鼠標滾輪切換</p>
    <p class="fragment">移動端滑動切換</p>
</section>

關於幻燈片切換效果，是通過transition配置值來設定的。我們也可以通過指定data-transition屬性來重寫全局配置。例如：

<section data-transition="zoom">
    <h2>This slide will override the presentation transition and zoom!</h2>
</section>

還有一個問題，如何設置幻燈片背景？幻燈片包含在幕的一個有限區域中，默認情況下，允許它們適應任何視口和縮放一致性。你可以通過給你的<section>元素添加一個data-background屬性來在幻燈片之外添加整個頁面的背景。支持四種類型的背景：color, image, video和iframe。

reveal.js項目Github地址：https://github.com/hakimel/reveal.js