体验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. ...
随机推荐
- php多条件组合查询
1. 通过表单把查询条件提交到php文件中,在文件中以post的形式得到传送过来的条件. 2. 把传过来的查询条件赋给变量. 3. 判断如果查询条件非空,则拼接查询sql. 大体如下: 1. < ...
- webapp开发——‘手机屏幕分辨率’与‘浏览器分辨率’不要混淆
关于webApp响应式设计遇到的问题,分享给大家,最近在做一个手机webApp,因为我手机是”米3“,屏幕截图大小是1080宽,所以css样式用@media screen and(min-width: ...
- python运维开发之路第一天
一.python安装及环境变量配置 1.windows7安装python 1)下载地址:https://www.python.org/downloads/windows/ 如下图: 注意:下载,用代理 ...
- js两个时间相减
平常总会遇到需要算两个日期之间是多少天,以下是使用JavaScript算时间差多少天的: // 给日期类对象添加日期差方法,返回日期与diff参数日期的时间差,单位为天 Date.prototype. ...
- ios的Ping++支付接入步骤-b
1. Client 发送支付要素给 Server 2. Server 发送支付请求并将返回的支付凭据传给 Client 3. Client 调起支付控件完成支付 4. 渠道同步返回支付结果给 Clie ...
- activiti入门3排他网关,并行网管,包含网关,事件网关(转)
网关用来控制流程的流向 网关可以消费也可以生成token. 网关显示成菱形图形,内部有有一个小图标. 图标表示网关的类型. 基本分支 首先 利用 流程变量 写个带有分支的一个基本流程 流程图: 部署 ...
- c# 绘图常用对象和方法
//BitMap 位图,常用的方法, Save:主要方式有:(1)保存在图像文件里,可以指定格式[gif,bmp]:(2) 保存在流中,以指定格式[gif,bmp] //gra ...
- sudo and su
sudo bash : change the current user into root su u1: change the current user into u1 useradd: add ne ...
- Light OJ 1030 - Discovering Gold
题目大意: 给你一个1*N的方格,你初始位置是在1,给你一个骰子,假设你现在的位置是X,你投掷一个骰子掷的点数是y, 那么你的新位置就是 X+y, 并且你可以得到新位置的宝藏.假如X+y > N ...
- 矩阵(快速幂):COGS 963. [NOI2012] 随机数生成器
963. [NOI2012] 随机数生成器 ★★ 输入文件:randoma.in 输出文件:randoma.out 简单对比 时间限制:1 s 内存限制:128 MB [问题描述] 栋 ...