用來做WEB演示文稿的框架Reveal.js該怎么使用

本篇文章給大家分享的是有關用來做WEB演示文稿的框架Reveal.js該怎么使用，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

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內容。例如：

<p class="reveal">    

<p class="slides">        

<section>slide1</section>        

<section>slide2</section>    

</p> </p>

Javascript

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

<script> Reveal.initialize({ // 是否在右下角展示控制條 

controls: true, 

// 是否顯示演示的進度條    

progress: true,    

// 是否顯示當前幻燈片的頁數    

slideNumber: 'c/t' 

}); 

</script>

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

選項設置

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

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

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

<section>

<h3>幻燈片切換方式</h3>

<p class="fragment">右下角控制條控制切換</p> 

<p class="fragment">可以使用鍵盤方向鍵操作</p> 

<p class="fragment">可以設置使用鼠標滾輪切換</p> 

<p class="fragment">移動端滑動切換</p>

 </section>

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

<section data-transition="zoom">    

<h3>This slide will override the presentation transition and zoom!</h3> 

</section>

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

以上就是用來做WEB演示文稿的框架Reveal.js該怎么使用，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。