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

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

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

reveal.js還擁有許多高級(jí)特性，完整安裝，某些 reveal.js 的功能，像外部的Markdown和演講注釋，需要演示文稿運(yùn)行在本地的一個(gè)web服務(wù)器上，因此需要在nodejs環(huán)境下運(yùn)行，安裝node.js以及grunt，稍微比較復(fù)雜。下面采用簡單安裝結(jié)合實(shí)例，使用reveal.js實(shí)現(xiàn)演示文稿的功能。

HTML

我們先引入主要的CSS文件以及js文件。CSS文件要在head內(nèi)就載入，而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標(biāo)記的層次結(jié)構(gòu)需要是 .reveal > .slides > section 這樣的，<section> 代表一個(gè)幻燈片并且能夠被無限地重復(fù)。如果我們將多個(gè) <section> 放到另一個(gè) <section>的內(nèi)部，它們將會(huì)以垂直幻燈片的方式顯示。<section>內(nèi)部可以是文本、圖片、多媒體等任意HTML內(nèi)容。例如：

<p class="reveal">    

<p class="slides">        

<section>slide1</section>        

<section>slide2</section>    

</p> </p>

Javascript

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

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

controls: true, 

// 是否顯示演示的進(jìn)度條    

progress: true,    

// 是否顯示當(dāng)前幻燈片的頁數(shù)    

slideNumber: 'c/t' 

}); 

</script>

以上代碼實(shí)現(xiàn)了可以允許右下角的控制條控制切換展示幻燈片、并顯示演示幻燈片的進(jìn)度條，以及顯示幻燈片的頁碼。

選項(xiàng)設(shè)置

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

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

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

<section>

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

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

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

<p class="fragment">可以設(shè)置使用鼠標(biāo)滾輪切換</p> 

<p class="fragment">移動(dòng)端滑動(dòng)切換</p>

 </section>

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

<section data-transition="zoom">    

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

</section>

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

以上就是用來做WEB演示文稿的框架Reveal.js該怎么使用，小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘９ぷ鲿?huì)見到或用到的。希望你能通過這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注億速云行業(yè)資訊頻道。