摘要

还需学习参考的链接  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演讲幻灯片框架的更多相关文章

  1. 基于CSS的幻灯片工具 reveal.js

    官网:http://lab.hakim.se/reveal-js/#/ github  https://github.com/hakimel/reveal.js 更多资源:6个最好的 HTML5/CS ...

  2. Reveal.js一个用来做WEB演示文稿的框架

    reveal.js是一个能够帮助我们很轻易地使用HTML来创建漂亮的演示效果,也就是我们常见的PPT幻灯片.reveal.js不依赖其他任何javascript库,是一个独立的javascript插件 ...

  3. 基于docker+reveal.js搭建一个属于自己的在线ppt网站

    前言 最近热衷于Docker,由于这段时间使用Docker来折腾自己的服务器,越来越感觉这是一种及其被应该推广的技术,因此想在公司内部也做一次技术分享.当然,如果只是做的PPT,我就不写这文章了.既然 ...

  4. Jupyter notbook& REVEAL.JS& nbconvert 使用jupyter notebook制作slides

    使用Jupyter notebook作为slide主要有两个方面: 在运行notebook 的时候可以幻灯片播放 这样幻灯片就有了notebook可交互的功能,而notebook就有了幻灯片全屏容易分 ...

  5. reveal.js让程序员做ppt也享受快乐

    前言 程序员除了会写的一手漂亮的代码,也要求做出风格优雅的PPT,诸如向领导汇报工作.向小组成员反馈项目进展自己的工作等等.就本人而言,做ppt还要去找模板,还需要设计风格,内心是焦灼的.于是乎,我搜 ...

  6. 转 10 个最佳的 Node.js 的 MVC 框架

    10 个最佳的 Node.js 的 MVC 框架 oschina 发布于: 2014年02月24日 (33评) 分享到:    收藏 +322 Node.js 是一个基于Chrome JavaScri ...

  7. Hexo - 快速,轻量,强大的 Node.js 博客框架

    Hexo 是一个快速,轻量,强大的 Node.js 博客框架.带给你难以置信的编译速度,瞬间生成静态文件:支持 Markdown,甚至可以在 Hexo 中集合 Octopress 插件:只需要一个命令 ...

  8. node.js Web应用框架Express.js(一)

    什么是Express.js Express 是一个简洁而灵活的 node.js Web应用框架, 提供一系列强大特性帮助你创建各种Web应用,提供丰富的HTTP工具以及来自Connect框架的中间件随 ...

  9. 使用 Require.js 引用第三方框架时遇到的一些情况

    使用 Require.js 引用第三方框架时遇到的一些情况 在使用Require.js解析依赖的时候,会出现以下几种情况: 程序中的依赖关系 当前程序 依赖于 B包, B包 依赖于 A包 A包与B包两 ...

随机推荐

  1. k8s的pod生命周期

    pod的生命周期: 1.init container 2.main contianer (1) post start hook :容器启动后做什么操作(可以命令查看kubectl explain po ...

  2. 编译-LAMP基于fastcgi

    前言 最近没更新新篇幅了,今天就来点干活,过多的也不说了下面着手干!干!干! 准备环境 centos7.5 apr-1.6.3.tar.gz  apr-util-1.6.1.tar.gz      h ...

  3. linux优化之优化开机自启动服务

    过滤出来需要的开机自启动项:chkconfig  --list|grep  3:on|grep  -v  "crond|sshd|network|rsyslog|sysstat" ...

  4. 日志切割logrotate和定时任务crontab详解

    1.关于日志切割 日志文件包含了关于系统中发生的事件的有用信息,在排障过程中或者系统性能分析时经常被用到.对于忙碌的服务器,日志文件大小会增长极快,服务器会很快消耗磁盘空间,这成了个问题.除此之外,处 ...

  5. 这一千个Python库,总有你想要的!

    环境管理 管理 Python 版本和环境的工具 p – 非常简单的交互式 python 版本管理工具. pyenv – 简单的 Python 版本管理工具. Vex – 可以在虚拟环境中执行命令. v ...

  6. 用session模拟登陆,手动输入验证码

    # 本练习是模拟登陆及验证码处理(把验证码下载到本地后手动输入) # 1 通过分析页面获得form表单的登陆接口为 action="https://www.douban.com/accoun ...

  7. HDU:4185-棋盘游戏

    棋盘游戏 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Problem Descri ...

  8. bash脚本编写基础

    bash脚本编程     命令的堆砌     脚本程序:解释器解析执行     shell:交互式接口,编程环境         shell:能够提供一些内部命令,并且能通过PATH环境变量找到外部命 ...

  9. Android后台的linux一直保持唤醒状态,不进入睡眠

    由于要做Android手机的电池续航测试,是不能插usb的,所以把case放到sh文件中,之后push到手机里,执行的. 但是出现个问题,假如case中有很长时间的sleep操作,关闭手机屏幕,这样l ...

  10. HDU 5396 区间DP 数学 Expression

    题意:有n个数字,n-1个运算符,每个运算符的顺序可以任意,因此一共有 (n - 1)! 种运算顺序,得到 (n - 1)! 个运算结果,然后求这些运算结果之和 MOD 1e9+7. 分析: 类比最优 ...