谈谈impress.js初步理解

一、对impress.js认识

　　impress.js 采用 CSS3 与 JavaScript 语言完成的一个可供开发者使用的表现层框架(演示工具)。

　　如今普通开发者能够利用 impress.js 本身开发出相似效果的演示工具，但性能比基于 FLASH 的 Prezi 更优。其功能包括画布的无限旋转与缩放，任意角度放置任意大小的文字，CSS3 3D 效果支持等。同时，也支持传统 PowerPoint 形式的幻灯演示。

　　目前 impress.js 是基于 webkit 浏览器（Chrome、Safari）开发，而在其它基于非 webkit 引擎，但支持 CSS3 3D 的浏览器也能正常运行。

二、使用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轴旋转多少度。

实例目录：

以上内容就是我对impress.js的初步理解，可能对此理解比较肤浅，以后小编还会深刻研究，请网友持续关注本站。