所属分类:网页特效-焦点图/幻灯片,UI/布局/瀑布流
reveal.js项目Github地址:https://github.com/hakimel/reveal.js
比较炫的一个插件,具体查看演示
一些选项参数:
参数 | 描述 | 默认值 |
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>
<p class="fragment">右下角控制条控制切换p>
<p class="fragment">可以使用键盘方向键操作p>
<p class="fragment">可以设置使用鼠标滚轮切换p>
<p class="fragment">移动端滑动切换p>
section>