Reveal.js超级炫酷一个用来做WEB演示文稿的框架

收藏

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

reveal.js是一个能够帮助我们很轻易地使用HTML来创建漂亮的演示效果，也就是我们常见的PPT幻灯片。reveal.js不依赖其他任何javascript库，是一个独立的javascript插件库。它提供了多种幻灯片过渡效果，是一个非常棒的在线演示库。reveal.js还拥有许多高级特性，完整安装，某些 reveal.js 的功能，像外部的Markdown和演讲注释，需要演示文稿运行在本地的一个web服务器上，因此需要在nodejs环境下运行，安装node.js以及grunt，稍微比较复杂。本文采用简单安装，结合本站实例，使用reveal.js实现演示文稿的功能。

我们先引入主要的CSS文件以及js文件。CSS文件要在head内就载入，而reveal.js可以在</body>>前载入。

<link rel="stylesheet" href="css/reveal.css"> 
<link rel="stylesheet" href="css/theme/moon.css"> 
<script src="js/reveal.js"></script>

HTML标记的层次结构需要是 .reveal > .slides > section 这样的，<section> 代表一个幻灯片并且能够被无限地重复。如果我们将多个 <section> 放到另一个 <section>的内部，它们将会以垂直幻灯片的方式显示。<section>内部可以是文本、图片、多媒体等任意HTML内容。例如：

<div class="reveal"> 
    <div class="slides"> 
        <section>slide1</section> 
        <section>slide2</section> 
    </div> 
</div>

Javascript

在页面最后，我们需要运行下面的代码来初始化幻灯片。注意，所有的配置的值都是可选的，下面展示的都是默认值：

<script> 
Reveal.initialize({ 
    // 是否在右下角展示控制条 
    controls: true, 
    // 是否显示演示的进度条 
    progress: true, 
    // 是否显示当前幻灯片的页数 
    slideNumber: 'c/t' 
}); 
</script>