亚洲激情专区-91九色丨porny丨老师-久久久久久久女国产乱让韩-国产精品午夜小视频观看

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

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

發布時間:2021-12-14 12:01:00 來源:億速云 閱讀:184 作者:柒染 欄目:開發技術

本篇文章給大家分享的是有關用來做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該怎么使用,小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

德昌县| 兰州市| 柳河县| 镇沅| 南和县| 枣强县| 交城县| 夏河县| 萨嘎县| 宁远县| 陆河县| 潼关县| 溆浦县| 民和| 安阳县| 鄯善县| 依安县| 桂东县| 景泰县| 磐石市| 淳安县| 资溪县| 佛山市| 揭阳市| 宁陕县| 铜川市| 平凉市| 辛集市| 新源县| 德江县| 平南县| 舒城县| 霍州市| 尼玛县| 宣城市| 伊宁县| 连江县| 买车| 贵港市| 永吉县| 辰溪县|