体验Impress.js

用腻了ppt，prezi的风格看起来更酷一点儿，无心中得知有Impress.js这么一个H5版的prezi，nice，值得一试。

关于Impress.js，网上教程不少，但说实话就跟教小朋友同样，一步一步的，又无聊又不得要领。

要我说，学Impress.js，只要几分钟~

1. 引入Impress.js，注意要在body末尾，也就是</body>标签前引用，这样里面的代码才会在你的html加载完成后再执行。

   <script src=""></script>

   ""里面填url。能够是你下载到本地的，那么这么写

   "./static/js/impress.js"

   也能够是来自百度静态资源库，那么这么写

   "http://apps.bdimg.com/libs/impress.js/0.5.3/impress.js"

   也能够直接引用做者的示例工程的

   "http://impress.github.io/impress.js/js/impress.js"

   甚至直接引用我fork的

   "http://zhengxiaoyao0716.github.io/FunCodeImpress/static/js/impress.js"

2. 再在body末尾，也就是</body>前加一句

   <script>impress().init();</script>

   这样Impress.js就初始化了。

3. 提供一个id为impress的div，用来展现。但在这以前，咱们最好先提供一个class为impress-not-supported的div，里面再创建一个class为fallback-message的div（其实直接把fallback-message补充到以前的div的class里也成），而后在其内写上若是浏览器不支持Impress.js时的提示。是的，网上的教程基本都这么说的，然并卵，你的提示并无如其名般的仅在不支持时显示。为何呢？由于你还缺乏一个css样式。Impress.js做者建议咱们定义本身的css样式，怎么定义能够参照他提供的impress-demo.css。（然而我直接照搬引用了~就是懒~~~怎么引用？见1，跟那差很少）

4. 而后，在id为impress的div里，你就能够写本身的内容了。我不会告诉你怎么一步步去写，无聊死了。你能够先设想有一个很大的平面，而后在上面放上一块块的内容。每一块内容就是一个div，指定其class为step，这样浏览时就会按定义的前后顺序逐一浏览它们。而后再为其增长一些属性，来肯定它应该显示在什么坐标上(data-x="?" data-y="?")，以什么样的旋转角度（2维：data-rotate="?"，立体：data-rotate-x/y/z="?"），多大的大小(data-scale="?")

5. 最后是一些高级的用法：指定一个class为overview的空白div，把它的坐标位置、大小、旋转设定好，好比坐标设置在全部整个平面的中心，大小为整个平面，因而你就获得了一个全局的俯视图。为一个step的class增长slide标签，那么你就获得了一张带白色背景和一些特殊样式的相似ppt单张的div，具体有还哪些样式，怎么用，多看一些示例的源码就知道了。或者，直接看impress-demo.css里面怎么定义的，固然，这些样式是须要引入impress-demo.css的，你不引入的话是没有的。也能够本身修改定义，事实上原做者建议你这么作。

ok，看完以上内容，应该就能够作本身的H5版prezi了。由于太简单了因此懒得好好组织语言了。讲的不明白的地方看看个人一个练手的源码吧。

个人GitHub上的一个练手的做品