Reveal.js演讲幻灯片框架
摘要
还需学习参考的链接 https://www.tuicool.com/articles/2AFFj2j
无意中看到这个插件,很喜欢,可以作用在演讲ppt,幻灯片,用户指引上等。代码简单,易维护
reveal.js不依赖其他任何javascript库,是一个独立的javascript插件库。它提供了多种幻灯片过渡效果,是一个非常棒的在线演示库。
reveal.js提供了全屏模式,只需要在键盘上点击 »F« 按键即可进入全屏模式,点击 »ESC« 按键可退出全屏模式。
head:
<link rel="stylesheet" href="css/reveal.css" />
<script type="text/javascript" src="js/reveal.js" ></script>
html:(基础的幻灯片html)
<div class="reveal">
<div class="slides">
<section><img src="data:images/banner1.jpg" width="100%"/></section>
<section><img src="data:images/banner2.jpg" width="100%"/></section>
</div>
</div>
js:
Reveal.initialize({
controls:true, //是否右下角显示控制条
progress:true, //是否显示进度条
slideNumber:'‘c/t’
})
选项设置:
效果图:
A.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>
B.关于幻灯片切换效果,是通过transition配置值来设定的。我们也可以通过指定data-transition属性来重写全局配置。例如:
<section data-transition="zoom">
<h2>This slide will override the presentation transition and zoom!</h2>
</section>
C.还有一个问题,如何设置幻灯片背景?
幻灯片包含在幕的一个有限区域中,默认情况下,允许它们适应任何视口和缩放一致性。
你可以通过给你的<section>元素添加一个data-background属性来在幻灯片之外添加整个页面的背景。
支持四种类型的背景:color, image, video和iframe。
Reveal.js演讲幻灯片框架的更多相关文章
- 基于CSS的幻灯片工具 reveal.js
官网:http://lab.hakim.se/reveal-js/#/ github https://github.com/hakimel/reveal.js 更多资源:6个最好的 HTML5/CS ...
- Reveal.js一个用来做WEB演示文稿的框架
reveal.js是一个能够帮助我们很轻易地使用HTML来创建漂亮的演示效果,也就是我们常见的PPT幻灯片.reveal.js不依赖其他任何javascript库,是一个独立的javascript插件 ...
- 基于docker+reveal.js搭建一个属于自己的在线ppt网站
前言 最近热衷于Docker,由于这段时间使用Docker来折腾自己的服务器,越来越感觉这是一种及其被应该推广的技术,因此想在公司内部也做一次技术分享.当然,如果只是做的PPT,我就不写这文章了.既然 ...
- Jupyter notbook& REVEAL.JS& nbconvert 使用jupyter notebook制作slides
使用Jupyter notebook作为slide主要有两个方面: 在运行notebook 的时候可以幻灯片播放 这样幻灯片就有了notebook可交互的功能,而notebook就有了幻灯片全屏容易分 ...
- reveal.js让程序员做ppt也享受快乐
前言 程序员除了会写的一手漂亮的代码,也要求做出风格优雅的PPT,诸如向领导汇报工作.向小组成员反馈项目进展自己的工作等等.就本人而言,做ppt还要去找模板,还需要设计风格,内心是焦灼的.于是乎,我搜 ...
- 转 10 个最佳的 Node.js 的 MVC 框架
10 个最佳的 Node.js 的 MVC 框架 oschina 发布于: 2014年02月24日 (33评) 分享到: 收藏 +322 Node.js 是一个基于Chrome JavaScri ...
- Hexo - 快速,轻量,强大的 Node.js 博客框架
Hexo 是一个快速,轻量,强大的 Node.js 博客框架.带给你难以置信的编译速度,瞬间生成静态文件:支持 Markdown,甚至可以在 Hexo 中集合 Octopress 插件:只需要一个命令 ...
- node.js Web应用框架Express.js(一)
什么是Express.js Express 是一个简洁而灵活的 node.js Web应用框架, 提供一系列强大特性帮助你创建各种Web应用,提供丰富的HTTP工具以及来自Connect框架的中间件随 ...
- 使用 Require.js 引用第三方框架时遇到的一些情况
使用 Require.js 引用第三方框架时遇到的一些情况 在使用Require.js解析依赖的时候,会出现以下几种情况: 程序中的依赖关系 当前程序 依赖于 B包, B包 依赖于 A包 A包与B包两 ...
随机推荐
- STM32CUBEMX入门学习笔记2:关于STM32芯片使用内部flash
找到正点原子的官网,下载他的HAL库:http://www.openedv.com/thread-109778-1-1.html 找到此例程,并打开其工程文件. 找到此文件,复制到自己工程里 复制到自 ...
- perl-basic-数据类型&引用
我觉得这一系列的标题应该是:PERL,从入门到放弃 USE IT OR U WILL LOSE IT 参考资料: https://qntm.org/files/perl/perl.html 在线per ...
- launchMode
launchMode在多个Activity跳转的过程中扮演着重要的角色,它可以决定是否生成新的Activity实例,是否重用已存在的Activity实例,是否和其他Activity实例公用一个task ...
- 浅谈抓取网页数据(奉上Demo)
Demo源码 背景 曾经在公司做过一个比价系统,就是抓取其它网站上商品的价格并和自己公司的商品进行对应,然后展示出来,给pm提供一个定价的参考.后来,有同事的朋友在找工作的时候,猎头让其做一个抓取去哪 ...
- 05-python进阶-简单监控程序开发
#!/usr/bin/env python #coding:utf-8 ''' 监控监控程序 ''' import json import urllib import inspect import o ...
- DB2 和 有道词典冲突: A communication error has been detected. Communication protocol being used: Reply.fill().
我在本机安装了DB2 9.5. 使用java jdbc连接,一直没有问题. QC for db2 连接 也一直没有问题. 突然有一天 Java程序连接 报错: A communication erro ...
- 理解Tomcat架构、启动流程及其性能优化
PS:but, it's bullshit ! 备注:实话说,从文档上扒拉的,文档地址:在每一个Tomcat安装目录下,会有一个webapps文件夹,里面有一个docs文件夹,点击index.html ...
- learn资料
老陈的CSDN博客: http://blog.csdn.net/qq_35587839 1.memcache 和 memcached的区别:http://www.phpweblog.net/fuyon ...
- 【bzoj4753】[Jsoi2016]最佳团体 分数规划+树形背包dp
题目描述 JSOI信息学代表队一共有N名候选人,这些候选人从1到N编号.方便起见,JYY的编号是0号.每个候选人都由一位编号比他小的候选人Ri推荐.如果Ri=0则说明这个候选人是JYY自己看上的.为了 ...
- 【Luogu】P1411树(树形高精DP)
题目链接 我貌似又做了一道高精题呢(笑) 这题的DP方程很好想,设f[i][j]表示i为根的子树,i所在联通块大小为j的最大值,然后乱搞 但是要高精,那么搞是得要高精除的 所以考虑f[i][j]是除以 ...