如何使用impress.js做一个网页版本的PPT
要做一个网站制作规范培训，之前村长做过一次培训，但是后来一直没有实行下去，项目没有继续制作，于是几个月后有一批小伙伴需要重新回来参与制作。让我来给大家来制作一个相应的制作培训，聪慧过人（偷懒）的我选择了直接拿村长的培训文件来修改一下，补充一下我修改问题的时候遇见的一些常见问题。也正因为如此，不会PPT，怎么办呢？装一下高大上，我就选择了一个js文件，用HTML来制作PPT效果，只需要按键切换页面，不使用它花哨的特效，选择其中最简单的一种左右切换就可以了。
impress 简单的介绍一下这个js插件，用它自己的话来描述说，就是：It's a presentation framework based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com.WARNING
impress.js may not help you if you have nothing interesting to say 😉
默认复制demo viewport标签
这个是可以修改的，我这里就直接默认复制的了，到时会用笔记本外接投影，1024的刚刚好是这笔记本的分辨率
<meta name="viewport" content="width=1024" />
DOM结构
引入样式文件 JS文件 并初始化
<link href="css/impress-demo.css" rel="stylesheet" />
<body class="impress-not-supported">
<div id="impress">
<script src='js/impress.js'></script>
<script>impress().init();</script>
</div>
</body>
PPT的第一页标题
还是习惯性的发挥聪明才智找到了一个tiny的，就使用它来作为标题，因为不太想修改css样式文件，就先这样偷懒一把。
<div id="tiny" class="step" data-x="2825" data-y="2325" data-z="-3000" data-rotate="300" data-scale="1">
<p><b>给你100块！<br />你可以帮我写PPT吗？</b></p>
</div>
再来添加一些页面内容
一个标题搭配一些页面内容就可以称之为简易PPT了，如果要酷炫你也可以继续折腾。添加第一个普通的页面的代码如下
<div class="step slide" data-x="-1000" data-y="-1500">+
<q>我是第一个页面，难免会有些紧张，因为我是第一个出场的帅哥！</q>
</div>
默认的样式的data-x的差值是1000，所以第二个页面就是0，依次类推，data-y的值默认不变，因为我们演示的只是一个简单的左右切换，你也可以整个高大上的旋转，怎么炫怎么弄。
DOM结构一直不变，于是乎我就想把数据写成一个数组，直接循环出来。最后我就愉快的写了好几个页面的数据。
var data = [
"我是第二个页面，话说最近公司的微波炉坏了，那你怎么上微博的呢？",
"我是第三个页面，谷歌今天访问不起了，我能用到的方法失效了，请问还有什么好的方法可以使用吗？",
"我是第最后一个页面，就不告诉你，就不告诉你。<br />……"
];
大致就到这里了，具体的demo，见下文。操作方式：上下键或者Tab键
demo地址：http://pushself.com/2014/12/10/impress/demo.html
