Reveal.js一个用来做WEB演示文稿的框架
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>>前载入。
<linkrel="stylesheet"href="css/reveal.css"> <linkrel="stylesheet"href="css/theme/moon.css"> <scriptsrc="js/reveal.js"></script>
HTML标记的层次结构需要是 .reveal > .slides > section 这样的,<section> 代表一个幻灯片并且能够被无限地重复。如果我们将多个 <section> 放到另一个 <section>的内部,它们将会以垂直幻灯片的方式显示。<section>内部可以是文本、图片、多媒体等任意HTML内容。例如:
<divclass="reveal"><divclass="slides"><section>slide1</section><section>slide2</section></div> </div>
Javascript
在页面最后,我们需要运行下面的代码来初始化幻灯片。注意,所有的配置的值都是可选的,下面展示的都是默认值:
<script>Reveal.initialize({//是否在右下角展示控制条controls: true,//是否显示演示的进度条progress: true,//是否显示当前幻灯片的页数slideNumber: 'c/t'});</script>
以上代码实现了可以允许右下角的控制条控制切换展示幻灯片、并显示演示幻灯片的进度条,以及显示幻灯片的页码。
选项设置
参数 | 描述 | 默认值 |
controls | 是否在右下角展示控制条 | true |
progress | 是否显示演示的进度条 | true |
slideNumber | 是否显示当前幻灯片的页数编号,也可以使用代码slideNumber: 'c / t' ,表示当前页/总页数。 | false |
history | 是否将每个幻灯片改变加入到浏览器的历史记录中去 | false |
keyboard | 是否启用键盘快捷键来导航 | true |
overview | 是否启用幻灯片的概览模式,可使用"Esc"或"o"键来切换概览模式 | true |
center | 是否将幻灯片垂直居中 | true |
touch | 是否在触屏设备上启用触摸滑动切换 | true |
loop | 是否循环演示 | false |
rtl | 是否将演示的方向变成RTL,即从右往左 | false |
fragments | 全局开启和关闭碎片。 | true |
autoSlide | 两个幻灯片之间自动切换的时间间隔(毫秒),当设置成 0 的时候则禁止自动切换,该值可以被幻灯片上的 ` data-autoslide` 属性覆盖 | 0 |
transition | 切换过渡效果,有none/fade/slide/convex/concave/zoom | 'default' |
transitionSpeed | 过渡速度,default/fast/slow | 'default' |
mouseWheel | 是否启用通过鼠标滚轮来切换幻灯片 | true |
此外,reveal.js还提供了全屏模式,只需要在键盘上点击 »F« 按键即可进入全屏模式,点击 »ESC« 按键可退出全屏模式。
reveal.js还有一个片段概念,片段被用来在一个幻灯片中来突出显示单独的一个元素。每一个带有 fragment 样式的元素将会在切换到下一个幻灯片之前被走过。默认的片段样式是开始不可见,然后淡入,我们可以将同一张幻灯片里的多个段落分作多个片段,并给他们加上.fragment样式即可,就像DEMO演示中的:
<section><h2>幻灯片切换方式</h2><pclass="fragment">右下角控制条控制切换</p><pclass="fragment">可以使用键盘方向键操作</p><pclass="fragment">可以设置使用鼠标滚轮切换</p><pclass="fragment">移动端滑动切换</p> </section>
关于幻灯片切换效果,是通过transition配置值来设定的。我们也可以通过指定data-transition属性来重写全局配置。例如:
<sectiondata-transition="zoom"><h2>This slide will override the presentation transition and zoom!</h2> </section>
还有一个问题,如何设置幻灯片背景?幻灯片包含在幕的一个有限区域中,默认情况下,允许它们适应任何视口和缩放一致性。你可以通过给你的<section>元素添加一个data-background属性来在幻灯片之外添加整个页面的背景。支持四种类型的背景:color, image, video和iframe。
reveal.js项目Github地址:https://github.com/hakimel/reveal.js
转载于:https://www.cnblogs.com/joyco773/p/9182189.html
Reveal.js一个用来做WEB演示文稿的框架相关推荐
- Heatmap.js 一个强大简易的web动态热图
Heatmap.js 一个强大简易的web动态热图 最近在做热力图效果,背景图上绘制热力图,最开始使用的事Echarts,但是Echarts绘制是基于map,还其他一些第三方的库也很多基于map,还要 ...
- 转:一个简单的基于WEB的QTP自动化测试框架-SAFFRON
来源: http://www.itestware.com/ctest/index.php?option=com_content&view=article&id=62:webqtp-sa ...
- 使用reveal.js制作精美的网页版PPT
前言 最近在做季度总结和技术分享,所以需要做个PPT, 来回顾这半年来的技术贡献. 但苦于mac上运行PPT那感人的流畅度, 成功的激起了笔者的强迫症, 所以索性想办法通过技术的手段来做个网页版PPT ...
- js 复制图片_不会做ppt?Reveal.js让你复制粘贴另类拉风,简洁优雅又低调
要了解一个新知识我们可以从三个方面入手:是什么,有什么用,怎么用.下面我们就从这三个方面进行讲解Reveal.js Reveal.js是什么 它是一个专门用来做 HTML 演示文稿的框架,通俗的讲它是 ...
- Reveal.js:把你的 Markdown 文稿变成 PPT
Reveal.js:把你的 Markdown 文稿变成 PPT https://github.com/hakimel/reveal.js 通过 Reveal.js 这个框架, 我们可以把 Markdo ...
- 如何使用Emacs Org模式和Reveal.js创建幻灯片
在过去的一年左右的时间里,我开始大量重新使用Emacs和Org模式包(用于记录笔记,组织自己等等). 我也开始将脚趾浸入水中,进行简短的演讲. 我一直在想如何将Emacs与演讲结合起来. 演示与文本编 ...
- reveal.js的使用
reveal.js的使用 如何用reveal.js写一个PPT 开始使用 reveal.js写法介绍 如何写动画 动态切换过场动画 动态切换主题 Markdown支持 代码高亮 设置背景 嵌入其他页面 ...
- 如何用Python做Web开发?——Django环境配置
用Python做Web开发,Django框架是个非常好的起点.如何从零开始,配置好Django开发环境呢?本文带你一步步无痛上手. 概念 最近有个词儿很流行,叫做"全栈"(full ...
- pythonweb开发-如何用Python做Web开发?——Django环境配置
用Python做Web开发,Django框架是个非常好的起点.如何从零开始,配置好Django开发环境呢?本文带你一步步无痛上手. 概念 最近有个词儿很流行,叫做"全栈"(full ...
最新文章
- SolidWorks转二维平面图
- 在Debian中建立Beaglebone black的应用开发环境之四:如何布置应用?
- python获取硬件信息
- 正则表达式的匹配模式
- BERT 蒸馏在垃圾舆情识别中的探索
- 传阿里旗下蚂蚁集团拟上市集资300亿美元,最快9月IPO
- Java 8 中的工厂方法模式
- 一个基于cocos2d-x 3.0和Box2d的demo小程序
- java web代码混淆_JAVA WEB 项目的代码混淆
- Hexo及Next主题配置(最新版)
- 带左右箭头的图片滚动html,js实现图片上显示左右箭头类似翻页效果的代码
- 关于 red bend
- 热点综述 | 单细胞测序的扩展、整合与转化
- Java获取本机外网ip地址的方法
- centos ping 路由_centos服务器怎么ping命令
- Sugar BI 增强分析能力全场景解析与分享
- 深度学习在计算机视觉中的应用
- 十九、RTC实时时钟
- 2022-08-03 Flume
- 织梦网站后台基本设置