用腻了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上的一个练手的作品

体验Impress.js的更多相关文章

  1. impress.js初体验

    概述 如果你已经厌烦了使用PowerPoint制作PPT,那么impress.js是一个非常好的选择,用它做的PPT更加直观,效果也非常的不错.装X是需要一定代价的,不过如果你是个前端爱好者那么一切就 ...

  2. impress.js初体验——前端装X利器

    impress.js 是国外一位开发者受 Prezi 启发,采用 CSS3 与 JavaScript 语言完成的一个可供开发者使用的表现层框架(演示工具).其功能包括画布的无限旋转与缩放,任意角度放置 ...

  3. Impress.js上手 - 抛开PPT、制作Web 3D幻灯片放映

    前言: 如果你已经厌倦了使用PPT设置路径.设置时间.设置动画方式来制作动画特效.那么Impress.js将是你一个非常好的选择. 用它制作的PPT将更加直观.效果也是嗷嗷美观的. 当然,如果用它来装 ...

  4. 如何使用impress.js做一个网页版本的PPT

    blockquote{font-size: 18px;line-height:1.5;margin:0;}line-height: 1.5; 要做一个网站制作规范培训,之前村长做过一次培训,但是后来一 ...

  5. 我在 impress.js 中学到的小套路

    我在 impress.js 中学到的小套路 写在开篇 作为了一个自学 JavaScript 才一个月的新手,前几天“妄图”研究 jQuery-3.1.0 源码,结果自然是被虐得死去活来.机缘巧合之下, ...

  6. 我对 impress.js 源码的理解

    源码看了两天,删掉了一些优化,和对 ipad 的支持,仅研究了其核心功能的实现,作以下记录. HTML 结构如下: <!doctype html> <html lang=" ...

  7. impress.js学习总结

    impress.js是一个很有趣的用来替代PPT的展示用的js工具,它的灵感来自prezi 如果你要学习使用它,这里有很好的演示模板 使用它的第一步,下载 impress.js,引入到你的代码里,并执 ...

  8. 一统江湖的大前端(1)——PPT制作库impress.js

    <一统江湖的大前端>系列是自己的学习笔记,旨在介绍javascript在非网页开发领域的应用案例和发现各类好玩的js库,不定期更新.如果你对前端的理解还是写写页面绑绑事件,那你真的是有点O ...

  9. 体验usually.js的管道函数——pipe函数

    体验usually.js的管道函数——pipe函数 usually.js 是一个面向现代 Web 开发的 JavaScript 函数库,基于 ES6 开发.最新版本2.4.1,最新版本usually. ...

随机推荐

  1. SQL 左外连接查询 将右表中的多行变为左表的一列或多列

    示例: --行列互转 /**************************************************************************************** ...

  2. 【Linux】vi编辑器命令

       1)进入vi的命令 vi filename :             打开或新建文件,并将光标置于第一行首 vi +n filename :          打开文件,并将光标置于第n行首 ...

  3. Python自动化运维之24、JQuery

    jQuery是一个兼容多浏览器的javascript库,核心理念是write less,do more(写得更少,做得更多).它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, ...

  4. 那些年被我坑过的Python——玄而又玄(第六章 面向对象编程基础)

    面向对象编程: 面向对象顾名思义,就是把组织代码的粒度从函数级别抽象到对象级别,对象是通过类来生成的,类可以想象为模板或进本框架而对象是在原有模板或框架的基础上增加详细信息的实体,类,有分类.聚类的含 ...

  5. 登录远程SQL服务器

    一 看ping 服务器IP能否ping通. 这个实际上是看和远程sql server 2000服务器的物理连接是否存在.如果不行,请检查网络,查看配置,当然得确保远程sql server 2000服务 ...

  6. cf E. George and Cards

    http://codeforces.com/contest/387/problem/E 题意:给你n个数,然后在输入k个数,这k个数都在n个数中出现,进行每一次操作就是在n个数中选择长度为w的连续序列 ...

  7. I2C转UART

    I2C转UART,51单片机普通IO口模拟I2C从机,解决UART不够的问题 /************************************************************ ...

  8. 我的VSTO之路(四):深入介绍Word开发

    原文:我的VSTO之路(四):深入介绍Word开发 在上一篇文章中,我介绍了Word的对象模型和一些基本开发技巧.为了更好的介绍Word插件开发,我为本文制作了一个Word书签的增强版,具体功能是让用 ...

  9. myisam和innodb索引实现的不同

    1.MyISAM 使用B+Tree 作为索引结构,叶子节点的data存放指针,也就是记录的地址.对于主键索引和辅助索引都是一样的.2.InnoDB 也使用B+Tree作为索引结构,也别需要注意的是,对 ...

  10. 一个Java对象到底占多大内存

    最近在读<深入理解Java虚拟机>,对Java对象的内存布局有了进一步的认识,于是脑子里自然而然就有一个很普通的问题,就是一个Java对象到底占用多大内存? 在网上搜到了一篇博客讲的非常好 ...