大家好，今天小编来为大家解答ppt在线浏览网站源码分享这个问题，ppt在线浏览网站源码分享怎么弄很多人还不知道，现在让我们一起来看看吧！
作者：徐小夕
转发链接：https://mp.weixin.qq.com/s/XHwOHf498t6ZNfDLiwZ6Xg
前言
最近在做季度总结和技术分享,所以需要做个PPT,来回顾这半年来的技术贡献.但苦于mac上运行PPT那感人的流畅度,成功的激起了笔者的强迫症,所以索性想办法通过技术的手段来做个网页版PPT,这个时候笔者发现了reveal.js:一个使用HTML语言制作演示文稿的Web框架，支持插入多种格式的内容，并以类似PPT的形式呈现.花了15分钟系统的调研了一下,觉得基本满足技术分享类PPT的要求,所以决定采用该方案来实现我的网页版PPT.这里列一下笔者的技术调研方法论,供大家参考:
所以笔者接下来大致按照以上几个衡量标准,来带大家一起感受一下如何快速通过reveal.js实现一个极具动感的PPT.
正文
首先笔者先来谈谈PPT的不足(非专业角度,技术视角):
PPT虽然强大，但占据了磁盘的大量空间，运行时内存占用也不小；而且在mac上跑PPT来就像乘上了印度的绿皮小火车。随着mac的普及和动画技术的发展，诸如Keynote、Prezi等新秀陆续出现，它们不仅轻量且可以实现各种炫目的动画效果.制作需要花费大量时间,受平台限制
所以对于不熟悉PPT套路的技术工作者来说,往往很难快速制作出精美的PPT.
接下来我们再看看reveal.js的优势.
reveal.js可以把Markdown文件转为类似PPT的演示文稿，轻快省力，减少排版上的时间，让演讲者更专于文字内容；同时，也获得PPT所不具有的灵活性制作发布灵活、不限应用，不限平台,只需修改或打开HTML文件丰富的特性，支持过渡动画、代码高亮、视频背景、Markdown语法、导出PDF等极度轻量，占用空间和内存少
说了这么多revealjs的优点,接下来我们就来学习如何使用它吧.
reveal.js使介绍以及核心api
作为一名前端工程师,我们很容易把reveal.js集成到我们的vue或者react项目中,但是作为演讲类型的项目,我们直接用最原始的方式实现即可,首先我们需要引入相关的文件,具体可参考官网所说的步骤去做:revealjs.com/.最简单的使用方式如下:
<html>\n<head>\n<linkrel=&34;href=&34;>\n<linkrel=&34;href=&34;>\n</head>\n<body>\n<divclass=&34;>\n<divclass=&34;>\n<section>Slide1</section>\n<section>Slide2</section>\n</div>\n</div>\n<scriptsrc=&34;></script>\n<script>\nReveal.initialize();\n</script>\n</body>\n</html>\n复制代码
这样通过短短几行代码,我们就能实现一个两页的PPT.
当然我们还能实现更加自由的演示动画,父子嵌套结构,专场动画等.接下来我们介绍几个核心API.
父子嵌套
父子嵌套主要是一个PPT主题可能包含很多子主题,要想实现父子主题分明的演示文档,在reveal.js也很好实现,只需要在section内部再包裹section标签即可.代码如下:
<divclass=&34;>\n\t<divclass=&34;>\n\t\t<section>Slide1</section>\n\t\t<section>\n<section>\nSlide2-1\n</section>\n<section>\nSlide2-2\n</section>\n</section>\n<section>Slide3</section>\n\t</div>\n</div>\n复制代码
效果如下图所示:
嵌入脚本
我们都知道技术类PPT肯定离不开代码,我们在reveal.js中可以很容易的展示我们的代码,并且支持多种语言,其框架底层集成了业界比较有名的highlight.js.使用方式如下:
使用Markdown
Markdown是技术工作者常用的编写文档的工具,revealjs同样也支持使用Markdown的方式来编写PPT,是不是很贴切?具体方式如下:
动态背景Backgrounnds
revealjs支持对每一页幻灯片使用自定义背景(包括视频).我们只需要在section标签中使用data-background即可,并且支持背景透明.具体demo如下:
Backgrounnds一共有如下属性可以使用:
data-background-image当前页的背景图片地址data-background-size背景的大小data-background-position背景位置data-background-repeat背景的重复方式data-background-opacity背景透明度data-background-video视频背景的地址data-background-video-loop视频背景的循环模式data-background-iframe背景为iframe的url地址data-background-interactive是否能与iframe的内容交互
Fragments
Fragments用来高亮或者渐进式的展现元素.每一个包含fragment类名的元素都被视为渐进的元素,它们会通过点击下一步来依次呈现在幻灯片中.
定制主题Theme
reveal.js提供了很多种不同风格的主题,我们只需要引入不同的css即可.包括黑色(black),白色(white),league,beige,天空(sky),夜晚(night)等主题.大家可以自行感受一下.
Transitions转场动画
不同幻灯片进入页面的动画方式我们可以使用Transitions来设定.以下是提供的几种默认转场动画:
fade淡出slide滑出convex凸面旋转concave凹面旋转zoom放大
具体demo实现如下:
<divclass=&34;>\n\t<divclass=&34;>\n\t\t<section>Slide1</section>\n\t\t<section>\n<sectiondata-transition=&34;>\nSlide2-1\n</section>\n<sectiondata-transition=&34;>\nSlide2-2\n</section>\n<sectiondata-transition=&34;>\nSlide2-3\n</section>\n<sectiondata-transition=&34;>\nSlide2-4\n</section>\n</section>\n<section>Slide3</section>\n\t</div>\n</div>\n复制代码
导出PDF
导出PDF作为一个附加功能也算是比较贴心了,如果想了解使用方式可以参考
https://revealjs.com/pdf-export/
接下来我们就来实现一个动态的PPTdemo,供大家学习参考.
reveal.js制作一个一个动感PPT
代码如下:
<body>\n\t<divclass=&34;>\n\t\t<divclass=&34;>\n\t\t\t<sectiondata-background-image=&34;data-background-opacity=&34;>\n<h1>趣谈前端</h1>\n<p>徐小夕</p>\n</section>\n\t<section>\n<sectiondata-transition=&34;data-background-color=&34;>\n<h1>趣谈前端Javascript</h1>\n</section>\n<sectiondata-transition=&34;data-background-color=&34;>\n<h1>趣谈前端Vue</h1>\n</section>\n<sectiondata-transition=&34;data-background-color=&61dafb&34;zoom&34;34;>\n<h1>趣谈前端Angular</h1>\n</section>\n</section>\n<section>\n<h1>NodeJS</h1>\n<pre><codedata-trimdata-noescape>\nconstfs=require(&39;)\nconstKoa=require(&39;)\nconstapp=newKoa()\n</code></pre>\n</section>\n<section>\n<h3>设计模式</h3>\n<pclass=&34;>观察者模式</p>\n<pclass=&34;>工厂模式</p>\n<pclass=&34;>迭代器模式</p>\n</section>\n<section>\n<h4>数据结构与算法</h4>\n\n</section>\n\t\t</div>\n\t</div>\n\n\t<scriptsrc=&34;></script>\n\t<scriptsrc=&34;></script>\n\t<scriptsrc=&34;></script>\n\t<scriptsrc=&34;></script>\n\t<script>\n\t\t//Moreinfoaboutinitialization&config:\n\t\t//-https://revealjs.com/initialization/\n\t\t//-https://revealjs.com/config/\n\t\tReveal.initialize({\n\t\t\thash:true,\n\n\t\t\t//Learnaboutplugins:https://revealjs.com/plugins/\n\t\t\tplugins:[RevealMarkdown,RevealHighlight,RevealNotes]\n\t\t});\n\t</script>\n</body>
推荐JavaScript学习相关文章
《15个简单的JS编码标准让你的代码更整洁》
《Node中的全链路式日志标记及处理》
《使用Node开发服务器项目时如何高效地打日志？》
《一文带你搞懂前端如何玩转Word文档》
《高频面试题：JavaScript事件循环机制解析》
《手写一个Promise/A+完美通过官方872个测试用例》
《你不知道的前端图片处理（上）》
《你不知道的前端图片处理（下）》
《钉钉前端-如何设计前端实时分析及报警系统》
《前端实现最佳截图方案（上）》
《前端实现最佳截图方案（下）》
《Node.js实现抢票小工具&短信通知提醒（上）「干货」》
《Node.js实现抢票小工具&短信通知提醒（下）「干货」》
《那些不常见，但却非常实用的JS知识点（上）》
《那些不常见，但却非常实用的JS知识点（下）》
《如何为团队定制自己的Node.js框架？》
《细品原生JS从初级到高级知识点汇总（一）》
《细品原生JS从初级到高级知识点汇总（二）》
《细品原生JS从初级到高级知识点汇总（三）》
《细品原生JS从初级到高级知识点汇总（四）》
《学习jQuery源码整体架构，打造属于自己的js类库》
《细说RTSP实现前端直播流探索记「干货」》
《一文带你搞懂前端登陆设计》
《使用Node.js将图片中的苹果变成橘子「实践」》
《基于Canvas实现的高斯模糊（上）「JS篇」》
《基于Canvas实现的高斯模糊（下）「JS篇」》
《由浅入深，66条JavaScript面试知识点（一）》
《由浅入深，66条JavaScript面试知识点（二）》
《由浅入深，66条JavaScript面试知识点（三）》
《由浅入深，66条JavaScript面试知识点（四）》
《由浅入深，66条JavaScript面试知识点（五）》
《由浅入深，66条JavaScript面试知识点（六）》
《由浅入深，66条JavaScript面试知识点（七）》
《为什么setTimeout有最小时延4ms?》
《如何处理Node.js中出现的未捕获异常？》
《Angularv10.0.0正式发布，不再支持IE9/10》
《基于Docker的SSR持续开发集成环境实践》
《细聊图解webpack指南手册》
《一文带你彻底搞懂NPM知识点「进阶篇」》
《细聊webpack性能优化面面观》
《JS实现各种日期操作方法汇总》
《「实践」细聊前端性能优化总结》
《「实践」浏览器中的画中画（Picture-in-Picture）模式及其API》
《「多图」一文带你彻底搞懂WebWorkers（上）》
《「多图」一文带你彻底搞懂WebWorkers（中）》
《深入细聊前端下载总结「干货」》
《细品西瓜播放器功能分析（上）「实践」》
《细品西瓜播放器功能分析（下）「实践」》
《细聊50道JavaScript基础面试题「附答案」》
《webpack4主流程源码解说以及动手实现一个简单的webpack（上）》
《webpack4主流程源码解说以及动手实现一个简单的webpack（下）》
《细聊前端架构师的视野》
《细聊应用场景再谈防抖和节流「进阶篇」》
《前端埋点统一接入方案实践》
《细聊微内核架构在前端的应用「干货」》
《一种高性能的Tree组件实现方案「干货」》
《进击的JAMStack》
《前后端全部用JS开发是什么体验（Hybrid+Egg.js经验分享）上》
《前后端全部用JS开发是什么体验（Hybrid+Egg.js经验分享）中》
《前后端全部用JS开发是什么体验（Hybrid+Egg.js经验分享）下》
《一文带你搞懂babel-plugin-import插件（上）「源码解析」》
《一文带你搞懂babel-plugin-import插件（下）「源码解析」》
《JavaScript常用API合集汇总「值得收藏」》
《推荐10个常用的图片处理小帮手（上）「值得收藏」》
《推荐10个常用的图片处理小帮手（下）「值得收藏」》
《JavaScript中ES6代理的实际用例》
《12个实用的前端开发技巧总结》
《一文带你搞懂搭建企业级的npm私有仓库》
《教你如何使用内联框架元素IFrames的沙箱属性提高安全性？》
《细说前端开发UI公共组件的新认识「实践」》
《细说DOMAPI中append和appendChild的三个不同点》
《细品淘系大佬讲前端新人如何上王者「干货」》
《一文带你彻底解决背景跟随弹窗滚动问题「干货」》
《推荐常用的5款代码比较工具「值得收藏」》
《Node.js实现将文字与图片合成技巧》
《爱奇艺云剪辑Web端的技术实现》
《我再也不敢说我会写前端Button组件「实践」》
《NodeXComponent-滴滴集团Node.js生态组件体系「实践」》
《NodeBuffers完整指南》
《推荐18个webpack精美插件「干货」》
《前端开发需要了解常用7种JavaScript设计模式》
《浅谈浏览器架构、单线程js、事件循环、消息队列、宏任务和微任务》
《了不起的WebpackHMR学习指南（上）「含源码讲解」》
《了不起的WebpackHMR学习指南（下）「含源码讲解」》
《10个打开了我新世界大门的WebAPI（上）「实践」》
《10个打开了我新世界大门的WebAPI（中）「实践」》
《10个打开了我新世界大门的WebAPI（下）「实践」》
《「图文」ESLint在中大型团队的应用实践》
《Deno是代码的浏览器，你认同吗？》
《前端存储除了localStorage还有啥？》
《Javascript多线程编程?的前世今生》
《微前端方案qiankun（实践及总结）》
《「图文」V8垃圾回收原来这么简单？》
《Webpack5模块联邦引发微前端的革命？》
《基于Web端的人脸识别身份验证「实践」》
《「前端进阶」高性能渲染十万条数据(时间分片)》
《「前端进阶」高性能渲染十万条数据(虚拟列表)》
《图解Promise实现原理（一）：基础实现》
《图解Promise实现原理（二）：Promise链式调用》
《图解Promise实现原理（三）：Promise原型方法实现》
《图解Promise实现原理（四）：Promise静态方法实现》
《实践教你从零构建前端Lint工作流「干货」》
《高性能多级多选级联组件开发「JS篇」》
《深入浅出讲解Node.jsCLI工具最佳实战》
《延迟加载图像以提高Web网站性能的五种方法「实践」》
《比较JavaScript对象的四种方式「实践」》
《使用ServiceWorker让你的Web应用如虎添翼（上）「干货」》
《使用ServiceWorker让你的Web应用如虎添翼（中）「干货」》
《使用ServiceWorker让你的Web应用如虎添翼（下）「干货」》
《前端如何一次性处理10万条数据「进阶篇」》
《推荐三款正则可视化工具「JS篇」》
《如何让用户选择是否离开当前页面？「JS篇」》
《JavaScript开发人员更喜欢Deno的五大原因》
《仅用18行JavaScript实现一个倒数计时器》
《图文细说JavaScript的运行机制》
《一个轻量级JavaScript全文搜索库，轻松实现站内离线搜索》
《推荐Web程序员常用的15个源代码编辑器》
《10个实用的JS技巧「值得收藏」》
《细品269个JavaScript小函数，让你少加班熬夜（一）「值得收藏」》
《细品269个JavaScript小函数，让你少加班熬夜（二）「值得收藏」》
《细品269个JavaScript小函数，让你少加班熬夜（三）「值得收藏」》
《细品269个JavaScript小函数，让你少加班熬夜（四）「值得收藏」》
《细品269个JavaScript小函数，让你少加班熬夜（五）「值得收藏」》
《细品269个JavaScript小函数，让你少加班熬夜（六）「值得收藏」》
《深入JavaScript教你内存泄漏如何防范》
《手把手教你7个有趣的JavaScript项目-上「附源码」》
《手把手教你7个有趣的JavaScript项目-下「附源码」》
《JavaScript使用mediaDevicesAPI访问摄像头自拍》
《手把手教你前端代码如何做错误上报「JS篇」》
《一文让你彻底搞懂移动前端和Web前端区别在哪里》
《63个JavaScript正则大礼包「值得收藏」》
《提高你的JavaScript技能10个问答题》
《JavaScript图表库的5个首选》
《一文彻底搞懂JavaScript中Object.freeze与Object.seal的用法》
《可视化的JS：动态图演示-事件循环EventLoop的过程》
《教你如何用动态规划和贪心算法实现前端瀑布流布局「实践」》
《可视化的js：动态图演示Promises&Async/Await的过程》
《原生JS封装拖动验证滑块你会吗？「实践」》
《如何实现高性能的在线PDF预览》
《细说使用字体库加密数据-仿58同城》
《Node.js要完了吗？》
《Pug3.0.0正式发布，不再支持Node.js6/8》
《纯JS手写轮播图（代码逻辑清晰，通俗易懂）》
《JavaScript20年中文版之创立标准》
《值得收藏的前端常用60余种工具方法「JS篇」》
《箭头函数和常规函数之间的5个区别》
《通过发布/订阅的设计模式搞懂Node.js核心模块Events》
《「前端篇」不再为正则烦恼》
《「速围」Node.jsV14.3.0发布支持顶级Await和REPL增强功能》
《深入细品浏览器原理「流程图」》
《JavaScript已进入第三个时代，未来将何去何从？》
《前端上传前预览文件image、text、json、video、audio「实践」》
《深入细品EventLoop和浏览器渲染、帧动画、空闲回调的关系》
《推荐13个有用的JavaScript数组技巧「值得收藏」》
《前端必备基础知识：window.location详解》
《不要再依赖CommonJS了》
《犀牛书作者：最该忘记的JavaScript特性》
《36个工作中常用的JavaScript函数片段「值得收藏」》
《Node+H5实现大文件分片上传、断点续传》
《一文了解文件上传全过程（1.8w字深度解析）「前端进阶必备」》
《【实践总结】关于小程序挣脱枷锁实现批量上传》
《手把手教你前端的各种文件上传攻略和大文件断点续传》
《字节跳动面试官：请你实现一个大文件上传和断点续传》
《谈谈前端关于文件上传下载那些事【实践】》
《手把手教你如何编写一个前端图片压缩、方向纠正、预览、上传插件》
《最全的JavaScript模块化方案和工具》
《「前端进阶」JS中的内存管理》
《JavaScript正则深入以及10个非常有意思的正则实战》
《前端面试者经常忽视的一道JavaScript面试题》
《一行JS代码实现一个简单的模板字符串替换「实践」》
《JS代码是如何被压缩的「前端高级进阶」》
《前端开发规范：命名规范、html规范、css规范、js规范》
《【规范篇】前端团队代码规范最佳实践》
《100个原生JavaScript代码片段知识点详细汇总【实践】》
《关于前端174道JavaScript知识点汇总（一）》
《关于前端174道JavaScript知识点汇总（二）》
《关于前端174道JavaScript知识点汇总（三）》
《几个非常有意思的javascript知识点总结【实践】》
《都2020年了，你还不会JavaScript装饰器？》
《JavaScript实现图片合成下载》
《70个JavaScript知识点详细总结（上）【实践】》
《70个JavaScript知识点详细总结（下）【实践】》
《开源了一个JavaScript版敏感词过滤库》
《送你43道JavaScript面试题》
《3个很棒的小众JavaScript库，你值得拥有》
《手把手教你深入巩固JavaScript知识体系【思维导图】》
《推荐7个很棒的JavaScript产品步骤引导库》
《Echa哥教你彻底弄懂JavaScript执行机制》
《一个合格的中级前端工程师需要掌握的28个JavaScript技巧》
《深入解析高频项目中运用到的知识点汇总【JS篇】》
《JavaScript工具函数大全【新】》
《从JavaScript中看设计模式(总结)》
《身份证号码的正则表达式及验证详解(JavaScript，Regex)》
《浏览器中实现JavaScript计时器的4种创新方式》
《Three.js动效方案》
《手把手教你常用的59个JS类方法》
《127个常用的JS代码片段，每段代码花30秒就能看懂-【上】》
《深入浅出讲解js深拷贝vs浅拷贝》
《手把手教你JS开发H5游戏【消灭星星】》
《深入浅出讲解JS中this/apply/call/bind巧妙用法【实践】》
《手把手教你全方位解读JS中this真正含义【实践】》
《书到用时方恨少，一大波JS开发工具函数来了》
《干货满满!如何优雅简洁地实现时钟翻牌器(支持JS/Vue/React)》
《手把手教你JS异步编程六种方案【实践】》
《让你减少加班的15条高效JS技巧知识点汇总【实践】》
《手把手教你JS开发H5游戏【黄金矿工】》
《手把手教你JS实现监控浏览器上下左右滚动》
《JS经典实例知识点整理汇总【实践】》
《2.6万字JS干货分享，带你领略前端魅力【基础篇】》
《2.6万字JS干货分享，带你领略前端魅力【实践篇】》
《简单几步让你的JS写得更漂亮》
《恭喜你获得治疗JSthis的详细药方》
《谈谈前端关于文件上传下载那些事【实践】》
《面试中教你绕过关于JavaScript作用域的5个坑》
《Jquery插件（常用的插件库）》
《【JS】如何防止重复发送ajax请求》
《JavaScript+Canvas实现自定义画板》
《Continuation在JS中的应用「前端篇」》
作者：徐小夕
转发链接：https://mp.weixin.qq.com/s/XHwOHf498t6ZNfDLiwZ6Xg
关于ppt在线浏览网站源码分享和ppt在线浏览网站源码分享怎么弄的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。