日期:2014-05-16  浏览次数:20513 次

如果厌倦了ppt的话,就用Impress.js制作演示吧。

https://github.com/sunseesiu/impress-tutorial


Impress.js使用教程

简介

Impress.js是一款基于css3转换和过渡、工作于现代浏览器(Google Chrome或Safari (或 Firefox 10 或 IE10))、并受prezi.com的理念启发的演示工具。如果你已经厌烦了使用PowerPoint制作PPT,那么impress.js是一个非常好的选择,用它做的PPT更加直观,效果也非常的不错。

Impress.js 是一个非常棒的用来创建在线演示的javascript库,但在其实际的项目网页中却没有说明文档。这篇指导将会帮你开始并创建一个简单的幻灯片演示,但完成后请记住它,用它做的不只局限于此,唯一的限制是你的创造力!

目前impress.js在最新的chrome/chromium、Safari 5.1 和Firefox 10上表现效果最佳,不兼容早期版本的Firefox或Internet Explorer。。在Opera中不能运行,因为他不支持CSS 3D转换。

配置

首要的事情是你要创建一个新的网页,我的是index.html并且里面配置了基本的head和body元素。

<!doctype html>
<html>
    <head>
        <title>Impress Tutorial</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>

    </body>
</html>

在body元素结束前引入impress.js文件,这是Impress包引入到你的项目中。

<script type=”text/javascript” src=”impress.js”></script>

接下来我们将创建一个wrapper包含幻灯片,这里用一个简单的id为 ‘impress’

元素。
<div id="impress">
</div>

创建幻灯片