impress.js
2015-09-27 02:15
627 查看
1、认识impress.js
impress.js 采用 CSS3 与 JavaScript 语言完成的一个可供开发者使用的表现层框架(演示工具)。现在普通开发者可以利用 impress.js 自己开发出类似效果的演示工具,但性能比基于 FLASH 的 Prezi 更优。其功能包括画布的无限旋转与缩放,任意角度放置任意大小的文字,CSS3 3D 效果支持等。同时,也支持传统 PowerPoint 形式的幻灯演示。
目前 impress.js 是基于 webkit 浏览器(Chrome、Safari)开发,而在其它基于非 webkit 引擎,但支持 CSS3 3D 的浏览器也能正常运行。
2、使用impress.js
引入impress.js:<script src="js/impress.js"></script>
现在你可以看到创建一个新的幻灯片是多少的容易了。每个幻灯片是一个<div>元素 (在wrapper内) 其class名称叫做’step’。
<div class="step"> My first slide </div>
虽然是创建一个简单的幻灯片,但你开始向你的幻灯片添加数据属性时还是很有趣的。数据属性表示它不是活动幻灯片时你的幻灯片的属性,您可以使用下面的数据属性:
data-x = 幻灯片的x坐标
data-y = 幻灯片的y坐标
data-scale = 通过指定一个值来进行缩放,data-scale为5则将会在你幻灯片原始尺寸基础放大5倍
data-rotate = 通过一个数字度数来确定旋转你的幻灯片
data-rotate-x = 为3D用,这个数字度数是它应该相对x轴旋转多少度。(前倾/后仰)
data-rotate-y = 为3D用,这个数字度数是它应该相对y轴旋转多少度。 (左摆/右摆)
data-rotate-z = 为3D用,这个数字度数是它应该相对z轴旋转多少度。
实例目录:
项目源码github地址:https://github.com/adobe1992/zl-doc
相关文章推荐
- (function ( ){...})( ) 与 (function ( ){...}( )) 有区别
- javascript的alert()与console.log()
- JS里的各种检测
- 【JS】打印Excel——ActiveX控件
- 浅谈javascript的Touch事件
- JS将滑动门改为选项卡(需鼠标点击)的实现方法
- JS实现带鼠标效果的头像及文章列表代码
- JS实现横向与竖向两个选项卡Tab联动的方法
- Ember.js 入门指南——路由切换的终止和回跳
- JavaScript高级程序设计之引用类型之基本包装类型第5.6讲笔记
- JavaScript权威设计--Window对象之Iframe(简要学习笔记十四)
- JavaScript高级程序设计之引用类型之Function 类型第5.5讲笔记
- JSON.stringify 语法实例讲解
- js之异常捕捉
- 对于JavaScript prototype的理解
- JavaScript中的闭包并不难理解
- jsp 之间传递中文参数乱码
- 解析json数组
- js正则 - 设置单词首字母为大写
- jsp url传中文参数乱码问题