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包两 ...
随机推荐
- k8s的pod生命周期
pod的生命周期: 1.init container 2.main contianer (1) post start hook :容器启动后做什么操作(可以命令查看kubectl explain po ...
- 编译-LAMP基于fastcgi
前言 最近没更新新篇幅了,今天就来点干活,过多的也不说了下面着手干!干!干! 准备环境 centos7.5 apr-1.6.3.tar.gz apr-util-1.6.1.tar.gz h ...
- linux优化之优化开机自启动服务
过滤出来需要的开机自启动项:chkconfig --list|grep 3:on|grep -v "crond|sshd|network|rsyslog|sysstat" ...
- 日志切割logrotate和定时任务crontab详解
1.关于日志切割 日志文件包含了关于系统中发生的事件的有用信息,在排障过程中或者系统性能分析时经常被用到.对于忙碌的服务器,日志文件大小会增长极快,服务器会很快消耗磁盘空间,这成了个问题.除此之外,处 ...
- 这一千个Python库,总有你想要的!
环境管理 管理 Python 版本和环境的工具 p – 非常简单的交互式 python 版本管理工具. pyenv – 简单的 Python 版本管理工具. Vex – 可以在虚拟环境中执行命令. v ...
- 用session模拟登陆,手动输入验证码
# 本练习是模拟登陆及验证码处理(把验证码下载到本地后手动输入) # 1 通过分析页面获得form表单的登陆接口为 action="https://www.douban.com/accoun ...
- HDU:4185-棋盘游戏
棋盘游戏 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Problem Descri ...
- bash脚本编写基础
bash脚本编程 命令的堆砌 脚本程序:解释器解析执行 shell:交互式接口,编程环境 shell:能够提供一些内部命令,并且能通过PATH环境变量找到外部命 ...
- Android后台的linux一直保持唤醒状态,不进入睡眠
由于要做Android手机的电池续航测试,是不能插usb的,所以把case放到sh文件中,之后push到手机里,执行的. 但是出现个问题,假如case中有很长时间的sleep操作,关闭手机屏幕,这样l ...
- HDU 5396 区间DP 数学 Expression
题意:有n个数字,n-1个运算符,每个运算符的顺序可以任意,因此一共有 (n - 1)! 种运算顺序,得到 (n - 1)! 个运算结果,然后求这些运算结果之和 MOD 1e9+7. 分析: 类比最优 ...