作者：徐紹錫
轉(zhuǎn)發(fā)鏈接：
前言
最近正在進行季度總結(jié)和技術(shù)共享，因此需要PPT來審查6個月的技術(shù)貢獻。但是憑借在MAC上運行PPT的感人流暢，成功地引起了筆者的強迫癥。所以單純地嘗試通過技術(shù)手段制作網(wǎng)頁PPT，這時筆者發(fā)現(xiàn)reveal.js:用HTML語言制作演示文稿。(威廉莎士比亞、Northern Exposure、Northern Exposure(美國電視)、HART)支持插入多種格式的內(nèi)容，并以類似的PPT格式提出。做了15分鐘的系統(tǒng)調(diào)查，覺得基本滿足了技術(shù)共享類PPT的要求，所以決定實現(xiàn)我的網(wǎng)頁版PPT。這里列出筆者的技術(shù)研究方法，供參考：
所以筆者將根據(jù)以下幾個測量標準，一起感受如何通過reveal.js快速實現(xiàn)非常動態(tài)的PPT。(威廉莎士比亞，美國作家)。
正文
我先談?wù)凱PT的不足(非專業(yè)角度、技術(shù)角度):
PPT功能強大，但占用了磁盤上的大量空間，運行時內(nèi)存使用量也不小。而且在MAC上跑PPT就像坐印度的綠色皮革火車一樣。隨著Mac的普及和動畫技術(shù)的發(fā)展，Keynote、Prezi等新秀陸續(xù)登場，不僅可以達到輕巧的效果，還可以達到各種耀眼的動畫效果。制作需要很多時間，而且受到平臺限制，所以對于不熟悉PPT例程的技術(shù)人員來說，快速制作精美的PPT往往很困難。
接下來，我們來看一下reveal.js的優(yōu)點。
Reveal.js將Markdown文件轉(zhuǎn)換為PPT等演示文稿，使演講者能夠輕松、輕松地縮短排版時間，使演講者能夠更加專注于文本內(nèi)容。此外，PPT沒有提供的靈活性創(chuàng)作和發(fā)布靈活性；沒有應(yīng)用程序限制；沒有平臺限制；修改或打開HTML文件的豐富功能；支持過渡動畫；代碼突出顯示；視頻背景、Markdown語法、PDF導(dǎo)出等非常輕便；占用空間和內(nèi)存減少revealjs的優(yōu)點
Reveal.js簡介和核心API
作為前端工程師，我們可以輕松地將reveal.js集成到vue或react項目中，但作為演講類型的項目，我們可以用最原始的方式直接實現(xiàn)。首先要引入相關(guān)文件。參考官網(wǎng)的程序， revealjs.com/。最簡單的使用
Html
頭(電影)
Link rel=' stylesheet ' href=' di
link rel=' style sheet ' href=' dist/theme；
/head
菩提
Div類=' reveal '
Div類=‘幻燈片’
第1節(jié)幻燈片(共1節(jié))
第2節(jié)幻燈片(共2節(jié))
/div
/div
腳本src=' di/腳本
腳本(腳本)
reveal . initialize()；
/腳本
/body
/html
這樣復(fù)制代碼
通過短短幾行代碼, 我們就能實現(xiàn)一個兩頁的PPT.當然我們還能實現(xiàn)更加自由的演示動畫, 父子嵌套結(jié)構(gòu), 專場動畫等. 接下來我們介紹幾個核心API.
父子嵌套
父子嵌套主要是一個PPT主題可能包含很多子主題, 要想實現(xiàn)父子主題分明的演示文檔, 在reveal.js也很好實現(xiàn), 只需要在section內(nèi)部再包裹section標簽即可. 代碼如下:
<div class="reveal"> <div class="slides"> <section>Slide 1</section> <section> <section> Slide 2-1 </section> <section> Slide 2-2 </section> </section> <section>Slide 3</section> </div> </div> 復(fù)制代碼效果如下圖所示:
嵌入腳本
我們都知道技術(shù)類PPT肯定離不開代碼, 我們在reveal.js中可以很容易的展示我們的代碼,并且支持多種語言, 其框架底層集成了 業(yè)界比較有名的. 使用方式如下:
使用Markdown
Markdown是技術(shù)工作者常用的編寫文檔的工具, revealjs同樣也支持使用Markdown的方式來編寫PPT, 是不是很貼切? 具體方式如下:
動態(tài)背景Backgrounnds
revealjs支持對每一頁幻燈片使用自定義背景(包括視頻).我們只需要在section標簽中使用data-background即可, 并且支持背景透明. 具體demo如下:
Backgrounnds一共有如下屬性可以使用:
- data-background-image 當前頁的背景圖片地址
- data-background-size 背景的大小
- data-background-position 背景位置
- data-background-repeat 背景的重復(fù)方式
- data-background-opacity 背景透明度
- data-background-video 視頻背景的地址
- data-background-video-loop 視頻背景的循環(huán)模式
- data-background-iframe 背景為iframe的url地址
- data-background-interactive 是否能與iframe的內(nèi)容交互
Fragments
Fragments用來高亮或者漸進式的展現(xiàn)元素.每一個包含fragment類名的元素都被視為漸進的元素, 它們會通過點擊下一步來依次呈現(xiàn)在幻燈片中.
定制主題Theme
reveal.js提供了很多種不同風格的主題, 我們只需要引入不同的css即可. 包括黑色(black), 白色(white), league, beige, 天空(sky), 夜晚(night)等主題.大家可以自行感受一下.
Transitions轉(zhuǎn)場動畫
不同幻燈片進入頁面的動畫方式我們可以使用Transitions來設(shè)定. 以下是提供的幾種默認轉(zhuǎn)場動畫:
- fade 淡出
- slide 滑出
- convex 凸面旋轉(zhuǎn)
- concave 凹面旋轉(zhuǎn)
- zoom 放大
具體demo實現(xiàn)如下:
<div class="reveal"> <div class="slides"> <section>Slide 1</section> <section> <section data-transition="fade"> Slide 2-1 </section> <section data-transition="convex"> Slide 2-2 </section> <section data-transition="concave"> Slide 2-3 </section> <section data-transition="zoom"> Slide 2-4 </section> </section> <section>Slide 3</section> </div> </div> 復(fù)制代碼導(dǎo)出PDF
導(dǎo)出PDF作為一個附加功能也算是比較貼心了,如果想了解使用方式可以參考
接下來我們就來實現(xiàn)一個動態(tài)的PPT demo, 供大家學習參考.
reveal.js制作一個一個動感PPT
代碼如下:
<body> <div class="reveal"> <div class="slides"> <section data-background-image="./img; data-background-opacity=".4"> <h1>趣談前端</h1> <p>徐小夕</p> </section> <section> <section data-transition="fade" data-background-color="orange"> <h1>趣談前端 Javascript</h1> </section> <section data-transition="convex" data-background-color="green"> <h1>趣談前端 Vue</h1> </section> <section data-transition="concave" data-background-color="#61dafb"> <h1>趣談前端 React</h1> </section> <section data-transition="zoom" data-background-color="#b32535"> <h1>趣談前端 Angular</h1> </section> </section> <section> <h1>NodeJS</h1> <pre><code data-trim data-noescape> const fs = require('fs') const Koa = require('koa') const app = new Koa() </code></pre> </section> <section> <h3>設(shè)計模式</h3> <p class="fragment">觀察者模式</p> <p class="fragment">工廠模式</p> <p class="fragment">迭代器模式</p> </section> <section> <h4>數(shù)據(jù)結(jié)構(gòu)與算法</h4> </section> </div> </div> <script src="di;></script> <script src="plugin/note;></script> <script src="plugin/markdown;></script> <script src="plugin/highlight/"></script> <script> // More info about initialization & config: // - // - Reveal.initialize({ hash: true, // Learn about plugins: plugins: [ RevealMarkdown, RevealHighlight, RevealNotes ] }); </script> </body>推薦JavaScript學習相關(guān)文章
《15個簡單的JS編碼標準讓你的代碼更整潔》
《Node 中的全鏈路式日志標記及處理》
《使用 Node 開發(fā)服務(wù)器項目時如何高效地打日志？》
《一文帶你搞懂前端如何玩轉(zhuǎn) Word 文檔》
《高頻面試題：JavaScript事件循環(huán)機制解析》
《手寫一個Promise/A+ 完美通過官方872個測試用例》
《你不知道的前端圖片處理（上）》
《你不知道的前端圖片處理（下）》
《釘釘前端-如何設(shè)計前端實時分析及報警系統(tǒng)》
《前端實現(xiàn)最佳截圖方案（上）》
《前端實現(xiàn)最佳截圖方案（下）》
《Node.js 實現(xiàn)搶票小工具&短信通知提醒（上）「干貨」》
《Node.js 實現(xiàn)搶票小工具&短信通知提醒（下）「干貨」》
《那些不常見，但卻非常實用的JS知識點（上）》
《那些不常見，但卻非常實用的JS知識點（下）》
《如何為團隊定制自己的 Node.js 框架？》
《細品原生JS從初級到高級知識點匯總（一）》
《細品原生JS從初級到高級知識點匯總（二）》
《細品原生JS從初級到高級知識點匯總（三）》
《細品原生JS從初級到高級知識點匯總（四）》
《學習 jQuery 源碼整體架構(gòu)，打造屬于自己的 js 類庫》
《細說RTSP實現(xiàn)前端直播流探索記「干貨」》
《一文帶你搞懂前端登陸設(shè)計》
《使用 Node.js 將圖片中的蘋果變成橘子「實踐」》
《基于Canvas實現(xiàn)的高斯模糊（上）「JS篇」》
《基于Canvas實現(xiàn)的高斯模糊（下）「JS篇」》
《由淺入深，66條JavaScript面試知識點（一）》
《由淺入深，66條JavaScript面試知識點（二）》
《由淺入深，66條JavaScript面試知識點（三）》
《由淺入深，66條JavaScript面試知識點（四）》
《由淺入深，66條JavaScript面試知識點（五）》
《由淺入深，66條JavaScript面試知識點（六）》
《由淺入深，66條JavaScript面試知識點（七）》
《為什么 setTimeout 有最小時延 4ms ?》
《如何處理 Node.js 中出現(xiàn)的未捕獲異常？》
《Angular v10.0.0 正式發(fā)布，不再支持 IE9/10》
《基于 Docker 的 SSR 持續(xù)開發(fā)集成環(huán)境實踐》
《細聊圖解webpack 指南手冊》
《一文帶你徹底搞懂 NPM 知識點「進階篇」》
《細聊webpack性能優(yōu)化面面觀》
《JS實現(xiàn)各種日期操作方法匯總》
《「實踐」細聊前端性能優(yōu)化總結(jié)》
《「實踐」瀏覽器中的畫中畫（Picture-in-Picture）模式及其 API》
《「多圖」一文帶你徹底搞懂 Web Workers （上）》
《「多圖」一文帶你徹底搞懂 Web Workers （中）》
《深入細聊前端下載總結(jié)「干貨」》
《細品西瓜播放器功能分析（上）「實踐」》
《細品西瓜播放器功能分析（下）「實踐」》
《細聊50道JavaScript基礎(chǔ)面試題「附答案」》
《webpack4主流程源碼解說以及動手實現(xiàn)一個簡單的webpack（上）》
《webpack4主流程源碼解說以及動手實現(xiàn)一個簡單的webpack（下）》
《細聊前端架構(gòu)師的視野》
《細聊應(yīng)用場景再談防抖和節(jié)流「進階篇」》
《前端埋點統(tǒng)一接入方案實踐》
《細聊微內(nèi)核架構(gòu)在前端的應(yīng)用「干貨」》
《一種高性能的Tree組件實現(xiàn)方案「干貨」》
《進擊的JAMStack》
《前后端全部用 JS 開發(fā)是什么體驗（Hybrid + Egg.js經(jīng)驗分享）上》
《前后端全部用 JS 開發(fā)是什么體驗（Hybrid + Egg.js經(jīng)驗分享）中》
《前后端全部用 JS 開發(fā)是什么體驗（Hybrid + Egg.js經(jīng)驗分享）下》
《一文帶你搞懂 babel-plugin-import 插件（上）「源碼解析」》
《一文帶你搞懂 babel-plugin-import 插件（下）「源碼解析」》
《JavaScript常用API合集匯總「值得收藏」》
《推薦10個常用的圖片處理小幫手（上）「值得收藏」》
《推薦10個常用的圖片處理小幫手（下）「值得收藏」》
《JavaScript 中ES6代理的實際用例》
《12 個實用的前端開發(fā)技巧總結(jié)》
《一文帶你搞懂搭建企業(yè)級的 npm 私有倉庫》
《教你如何使用內(nèi)聯(lián)框架元素 IFrames 的沙箱屬性提高安全性？》
《細說前端開發(fā)UI公共組件的新認識「實踐」》
《細說DOM API中append和appendChild的三個不同點》
《細品淘系大佬講前端新人如何上王者「干貨」》
《一文帶你徹底解決背景跟隨彈窗滾動問題「干貨」》
《推薦常用的5款代碼比較工具「值得收藏」》
《Node.js實現(xiàn)將文字與圖片合成技巧》
《愛奇藝云剪輯Web端的技術(shù)實現(xiàn)》
《我再也不敢說我會寫前端 Button組件「實踐」》
《NodeX Component - 滴滴集團 Node.js 生態(tài)組件體系「實踐」》
《Node Buffers 完整指南》
《推薦18個webpack精美插件「干貨」》
《前端開發(fā)需要了解常用7種JavaScript設(shè)計模式》
《淺談瀏覽器架構(gòu)、單線程js、事件循環(huán)、消息隊列、宏任務(wù)和微任務(wù)》
《了不起的 Webpack HMR 學習指南（上）「含源碼講解」》
《了不起的 Webpack HMR 學習指南（下）「含源碼講解」》
《10個打開了我新世界大門的 WebAPI（上）「實踐」》
《10個打開了我新世界大門的 WebAPI（中）「實踐」》
《10個打開了我新世界大門的 WebAPI（下）「實踐」》
《「圖文」ESLint 在中大型團隊的應(yīng)用實踐》
《Deno是代碼的瀏覽器，你認同嗎？》
《前端存儲除了 localStorage 還有啥？》
《Javascript 多線程編程?的前世今生》
《微前端方案 qiankun（實踐及總結(jié)）》
《「圖文」V8 垃圾回收原來這么簡單？》
《Webpack 5模塊聯(lián)邦引發(fā)微前端的革命？》
《基于 Web 端的人臉識別身份驗證「實踐」》
《「前端進階」高性能渲染十萬條數(shù)據(jù)(時間分片)》
《「前端進階」高性能渲染十萬條數(shù)據(jù)(虛擬列表)》
《圖解 Promise 實現(xiàn)原理（一）：基礎(chǔ)實現(xiàn)》
《圖解 Promise 實現(xiàn)原理（二）：Promise 鏈式調(diào)用》
《圖解 Promise 實現(xiàn)原理（三）：Promise 原型方法實現(xiàn)》
《圖解 Promise 實現(xiàn)原理（四）：Promise 靜態(tài)方法實現(xiàn)》
《實踐教你從零構(gòu)建前端 Lint 工作流「干貨」》
《高性能多級多選級聯(lián)組件開發(fā)「JS篇」》
《深入淺出講解Node.js CLI 工具最佳實戰(zhàn)》
《延遲加載圖像以提高Web網(wǎng)站性能的五種方法「實踐」》
《比較 JavaScript 對象的四種方式「實踐」》
《使用Service Worker讓你的 Web 應(yīng)用如虎添翼（上）「干貨」》
《使用Service Worker讓你的 Web 應(yīng)用如虎添翼（中）「干貨」》
《使用Service Worker讓你的 Web 應(yīng)用如虎添翼（下）「干貨」》
《前端如何一次性處理10萬條數(shù)據(jù)「進階篇」》
《推薦三款正則可視化工具「JS篇」》
《如何讓用戶選擇是否離開當前頁面？「JS篇」》
《JavaScript開發(fā)人員更喜歡Deno的五大原因》
《僅用18行JavaScript實現(xiàn)一個倒數(shù)計時器》
《圖文細說JavaScript 的運行機制》
《一個輕量級 JavaScript 全文搜索庫，輕松實現(xiàn)站內(nèi)離線搜索》
《推薦Web程序員常用的15個源代碼編輯器》
《10個實用的JS技巧「值得收藏」》
《細品269個JavaScript小函數(shù)，讓你少加班熬夜（一）「值得收藏」》
《細品269個JavaScript小函數(shù)，讓你少加班熬夜（二）「值得收藏」》
《細品269個JavaScript小函數(shù)，讓你少加班熬夜（三）「值得收藏」》
《細品269個JavaScript小函數(shù)，讓你少加班熬夜（四）「值得收藏」》
《細品269個JavaScript小函數(shù)，讓你少加班熬夜（五）「值得收藏」》
《細品269個JavaScript小函數(shù)，讓你少加班熬夜（六）「值得收藏」》
《深入JavaScript教你內(nèi)存泄漏如何防范》
《手把手教你7個有趣的JavaScript 項目-上「附源碼」》
《手把手教你7個有趣的JavaScript 項目-下「附源碼」》
《JavaScript 使用 mediaDevices API 訪問攝像頭自拍》
《手把手教你前端代碼如何做錯誤上報「JS篇」》
《一文讓你徹底搞懂移動前端和Web 前端區(qū)別在哪里》
《63個JavaScript 正則大禮包「值得收藏」》
《提高你的 JavaScript 技能10 個問答題》
《JavaScript圖表庫的5個首選》
《一文徹底搞懂JavaScript 中Object.freeze與Object.seal的用法》
《可視化的 JS：動態(tài)圖演示 - 事件循環(huán) Event Loop的過程》
《教你如何用動態(tài)規(guī)劃和貪心算法實現(xiàn)前端瀑布流布局「實踐」》
《可視化的 js：動態(tài)圖演示 Promises & Async/Await 的過程》
《原生JS封裝拖動驗證滑塊你會嗎？「實踐」》
《如何實現(xiàn)高性能的在線 PDF 預(yù)覽》
《細說使用字體庫加密數(shù)據(jù)-仿58同城》
《Node.js要完了嗎？》
《Pug 3.0.0正式發(fā)布，不再支持 Node.js 6/8》
《純JS手寫輪播圖（代碼邏輯清晰，通俗易懂）》
《JavaScript 20 年 中文版之創(chuàng)立標準》
《值得收藏的前端常用60余種工具方法「JS篇」》
《箭頭函數(shù)和常規(guī)函數(shù)之間的 5 個區(qū)別》
《通過發(fā)布/訂閱的設(shè)計模式搞懂 Node.js 核心模塊 Events》
《「前端篇」不再為正則煩惱》
《「速圍」Node.js V14.3.0 發(fā)布支持頂級 Await 和 REPL 增強功能》
《深入細品瀏覽器原理「流程圖」》
《JavaScript 已進入第三個時代，未來將何去何從？》
《前端上傳前預(yù)覽文件 image、text、json、video、audio「實踐」》
《深入細品 EventLoop 和瀏覽器渲染、幀動畫、空閑回調(diào)的關(guān)系》
《推薦13個有用的JavaScript數(shù)組技巧「值得收藏」》
《前端必備基礎(chǔ)知識：window.location 詳解》
《不要再依賴CommonJS了》
《犀牛書作者：最該忘記的JavaScript特性》
《36個工作中常用的JavaScript函數(shù)片段「值得收藏」》
《Node + H5 實現(xiàn)大文件分片上傳、斷點續(xù)傳》
《一文了解文件上傳全過程（1.8w字深度解析）「前端進階必備」》
《【實踐總結(jié)】關(guān)于小程序掙脫枷鎖實現(xiàn)批量上傳》
《手把手教你前端的各種文件上傳攻略和大文件斷點續(xù)傳》
《字節(jié)跳動面試官：請你實現(xiàn)一個大文件上傳和斷點續(xù)傳》
《談?wù)勄岸岁P(guān)于文件上傳下載那些事【實踐】》
《手把手教你如何編寫一個前端圖片壓縮、方向糾正、預(yù)覽、上傳插件》
《最全的 JavaScript 模塊化方案和工具》
《「前端進階」JS中的內(nèi)存管理》
《JavaScript正則深入以及10個非常有意思的正則實戰(zhàn)》
《前端面試者經(jīng)常忽視的一道JavaScript 面試題》
《一行JS代碼實現(xiàn)一個簡單的模板字符串替換「實踐」》
《JS代碼是如何被壓縮的「前端高級進階」》
《前端開發(fā)規(guī)范：命名規(guī)范、html規(guī)范、css規(guī)范、js規(guī)范》
《【規(guī)范篇】前端團隊代碼規(guī)范最佳實踐》
《100個原生JavaScript代碼片段知識點詳細匯總【實踐】》
《關(guān)于前端174道 JavaScript知識點匯總（一）》
《關(guān)于前端174道 JavaScript知識點匯總（二）》
《關(guān)于前端174道 JavaScript知識點匯總（三）》
《幾個非常有意思的javascript知識點總結(jié)【實踐】》
《都2020年了，你還不會JavaScript 裝飾器？》
《JavaScript實現(xiàn)圖片合成下載》
《70個JavaScript知識點詳細總結(jié)（上）【實踐】》
《70個JavaScript知識點詳細總結(jié)（下）【實踐】》
《開源了一個 JavaScript 版敏感詞過濾庫》
《送你 43 道 JavaScript 面試題》
《3個很棒的小眾JavaScript庫，你值得擁有》
《手把手教你深入鞏固JavaScript知識體系【思維導(dǎo)圖】》
《推薦7個很棒的JavaScript產(chǎn)品步驟引導(dǎo)庫》
《Echa哥教你徹底弄懂 JavaScript 執(zhí)行機制》
《一個合格的中級前端工程師需要掌握的 28 個 JavaScript 技巧》
《深入解析高頻項目中運用到的知識點匯總【JS篇】》
《JavaScript 工具函數(shù)大全【新】》
《從JavaScript中看設(shè)計模式(總結(jié))》
《身份證號碼的正則表達式及驗證詳解(JavaScript，Regex)》
《瀏覽器中實現(xiàn)JavaScript計時器的4種創(chuàng)新方式》
《T 動效方案》
《手把手教你常用的59個JS類方法》
《127個常用的JS代碼片段，每段代碼花30秒就能看懂-【上】》
《深入淺出講解 js 深拷貝 vs 淺拷貝》
《手把手教你JS開發(fā)H5游戲【消滅星星】》
《深入淺出講解JS中this/apply/call/bind巧妙用法【實踐】》
《手把手教你全方位解讀JS中this真正含義【實踐】》
《書到用時方恨少，一大波JS開發(fā)工具函數(shù)來了》
《干貨滿滿!如何優(yōu)雅簡潔地實現(xiàn)時鐘翻牌器(支持JS/Vue/React)》
《手把手教你JS 異步編程六種方案【實踐】》
《讓你減少加班的15條高效JS技巧知識點匯總【實踐】》
《手把手教你JS開發(fā)H5游戲【黃金礦工】》
《手把手教你JS實現(xiàn)監(jiān)控瀏覽器上下左右滾動》
《JS 經(jīng)典實例知識點整理匯總【實踐】》
《2.6萬字JS干貨分享，帶你領(lǐng)略前端魅力【基礎(chǔ)篇】》
《2.6萬字JS干貨分享，帶你領(lǐng)略前端魅力【實踐篇】》
《簡單幾步讓你的 JS 寫得更漂亮》
《恭喜你獲得治療JS this的詳細藥方》
《談?wù)勄岸岁P(guān)于文件上傳下載那些事【實踐】》
《面試中教你繞過關(guān)于 JavaScript 作用域的 5 個坑》
《Jquery插件（常用的插件庫）》
《【JS】如何防止重復(fù)發(fā)送ajax請求》
《JavaScript+Canvas實現(xiàn)自定義畫板》
《Continuation 在 JS 中的應(yīng)用「前端篇」》
作者： 徐小夕
轉(zhuǎn)發(fā)鏈接：
1.《【電腦網(wǎng)頁怎么做PPT】使用Reveal.js創(chuàng)建完善的web版本PPT》援引自互聯(lián)網(wǎng)，旨在傳遞更多網(wǎng)絡(luò)信息知識，僅代表作者本人觀點，與本網(wǎng)站無關(guān)，侵刪請聯(lián)系頁腳下方聯(lián)系方式。
2.《【電腦網(wǎng)頁怎么做PPT】使用Reveal.js創(chuàng)建完善的web版本PPT》僅供讀者參考，本網(wǎng)站未對該內(nèi)容進行證實，對其原創(chuàng)性、真實性、完整性、及時性不作任何保證。
3.文章轉(zhuǎn)載時請保留本站內(nèi)容來源地址，http://f99ss.com/keji/2495420.html