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

上一篇:【转载】shell编程——if语句 if -z -n -f -eq -ne -lt


下一篇:Linux Shell编程case语句