体验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上的一个练手的作品

转载于:https://www.cnblogs.com/zhengxiaoyao0716/p/5914919.html