zoukankan      html  css  js  c++  java
  • 体验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上的一个练手的作品

  • 相关阅读:
    Django之使用内置函数和celery发邮件
    Django之FBV和CBV的用法
    使用xampp将angular项目运行在web服务器
    Django之使用中间件解决前后端同源策略问题
    Spring cloud Feign 调用端不生效
    进程同步——哲学家进餐问题Java实现
    数据库事务四大特性、隔离级别
    B树 B+树 红黑树
    SpringCloud Config Bus webhook 只能刷新config server 不能刷新config client
    Java8 容器类详解
  • 原文地址:https://www.cnblogs.com/zhengxiaoyao0716/p/5914919.html
Copyright © 2011-2022 走看看