体验Impress.js
用腻了ppt,prezi的风格看起来更酷一点儿,无意中得知有Impress.js这么一个H5版的prezi,nice,值得一试。
关于Impress.js,网上教程很多,但说实话就跟教小朋友一样,一步一步的,又无聊又不得要领。
要我说,学Impress.js,只要几分钟~
引入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"
再在body末尾,也就是</body>前加一句
<script>impress().init();</script>
这样Impress.js就初始化了。
提供一个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,跟那差不多)
然后,在id为impress的div里,你就可以写自己的内容了。我不会告诉你怎么一步步去写,无聊死了。你可以先设想有一个很大的平面,然后在上面放上一块块的内容。每一块内容就是一个div,指定其class为step,这样浏览时就会按定义的先后顺序逐一浏览它们。然后再为其增加一些属性,来确定它应该显示在什么坐标上(data-x="?" data-y="?"),以什么样的旋转角度(2维:data-rotate="?",立体:data-rotate-x/y/z="?"),多大的大小(data-scale="?")
最后是一些高级的用法:指定一个class为overview的空白div,把它的坐标位置、大小、旋转设定好,比如坐标设置在所有整个平面的中心,大小为整个平面,于是你就得到了一个全局的俯视图。为一个step的class增加slide标签,那么你就得到了一张带白色背景和一些特殊样式的类似ppt单张的div,具体有还哪些样式,怎么用,多看一些示例的源码就知道了。或者,直接看impress-demo.css里面怎么定义的,当然,这些样式是需要引入impress-demo.css的,你不引入的话是没有的。也可以自己修改定义,事实上原作者建议你这么做。
ok,看完以上内容,应该就可以做自己的H5版prezi了。因为太简单了所以懒得好好组织语言了。讲的不明白的地方看看我的一个练手的源码吧。
体验Impress.js的更多相关文章
- impress.js初体验
概述 如果你已经厌烦了使用PowerPoint制作PPT,那么impress.js是一个非常好的选择,用它做的PPT更加直观,效果也非常的不错.装X是需要一定代价的,不过如果你是个前端爱好者那么一切就 ...
- impress.js初体验——前端装X利器
impress.js 是国外一位开发者受 Prezi 启发,采用 CSS3 与 JavaScript 语言完成的一个可供开发者使用的表现层框架(演示工具).其功能包括画布的无限旋转与缩放,任意角度放置 ...
- Impress.js上手 - 抛开PPT、制作Web 3D幻灯片放映
前言: 如果你已经厌倦了使用PPT设置路径.设置时间.设置动画方式来制作动画特效.那么Impress.js将是你一个非常好的选择. 用它制作的PPT将更加直观.效果也是嗷嗷美观的. 当然,如果用它来装 ...
- 如何使用impress.js做一个网页版本的PPT
blockquote{font-size: 18px;line-height:1.5;margin:0;}line-height: 1.5; 要做一个网站制作规范培训,之前村长做过一次培训,但是后来一 ...
- 我在 impress.js 中学到的小套路
我在 impress.js 中学到的小套路 写在开篇 作为了一个自学 JavaScript 才一个月的新手,前几天“妄图”研究 jQuery-3.1.0 源码,结果自然是被虐得死去活来.机缘巧合之下, ...
- 我对 impress.js 源码的理解
源码看了两天,删掉了一些优化,和对 ipad 的支持,仅研究了其核心功能的实现,作以下记录. HTML 结构如下: <!doctype html> <html lang=" ...
- impress.js学习总结
impress.js是一个很有趣的用来替代PPT的展示用的js工具,它的灵感来自prezi 如果你要学习使用它,这里有很好的演示模板 使用它的第一步,下载 impress.js,引入到你的代码里,并执 ...
- 一统江湖的大前端(1)——PPT制作库impress.js
<一统江湖的大前端>系列是自己的学习笔记,旨在介绍javascript在非网页开发领域的应用案例和发现各类好玩的js库,不定期更新.如果你对前端的理解还是写写页面绑绑事件,那你真的是有点O ...
- 体验usually.js的管道函数——pipe函数
体验usually.js的管道函数——pipe函数 usually.js 是一个面向现代 Web 开发的 JavaScript 函数库,基于 ES6 开发.最新版本2.4.1,最新版本usually. ...
随机推荐
- 浏览器中的WebSocket("ws://127.0.0.1:9988");
<script type="text/javascript"> function WebSocketTest() { if ("WebSocket" ...
- dede操作成功信息提示修改
函数修改 include/common.func.php 文件 function ShowMsg()函数
- 2014/09/30 Learning Note
Vbird Linux: Vim Learning: http://linux.vbird.org/linux_basic/0310vi.php Bash Shell: http://linux.vb ...
- ECommon.Dapper
ECommon.Dapper 轻量级的dapper扩展 我们都知道Dapper这个orm框架,但是我们也知道他的扩展目前没有特别好的,今天我就推荐一个轻量级的很方便使用的一个扩展叫做 ECommon. ...
- Mac电脑手动清理
Xcode的无用的文件如图找到DerivedData文件夹,删除里面文件就可以了(先找到隐藏的文件)
- BZOJ 1185 最小矩形覆盖
Description Input Output Sample Input Sample Output HINT 其实这题就是一道旋转卡壳的裸题,但是我的精度萎了.直接上hzwer的代码吧... #i ...
- WebKit JavaScript Binding添加新DOM对象的三种方式
一.基础知识 首先WebKit IDL并非完全遵循Web IDL,只是借鉴使用.WebKit官网提供了一份说明(WebKitIDL),比如Web IDL称"operation”(操作), 而 ...
- 【Java】Java垃圾回收机制
Java垃圾回收机制 说到垃圾回收(Garbage Collection,GC),很多人就会自然而然地把它和Java联系起来.在Java中,程序员不需要去关心内存动态分配和垃圾回收的问题,这一切都交给 ...
- hdu-3046-Pleasant sheep and big big wolf(最大流最小割)
题意: 给出最少栏杆数使狼和羊分离 分析: 将狼与源点连,羊与汇点连,容量都为无穷,将图的各个相邻点连接,容量为1 然后题目就转化成最小去掉多少条边使不连通,即求最小割最大流. // File Nam ...
- 【转】Android:Layout_weight的深刻理解
原文网址:http://mobile.51cto.com/abased-375428.htm 本文详细介绍了Android布局中Layout_weight的属性,它是用来分配属于空间的一个属性,你可以 ...