Impress.js是一个表示层框架(演示工具),受Prezi启发,由一个国外开发者用CSS3和JavaScript完成。有兴趣的朋友跟边肖学。
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元素(在包装器内部),其类名为“step”。
复制代码如下:
div class=step
我的第一张幻灯片
/div
虽然是为了创建一个简单的幻灯片,但是当你开始给你的幻灯片添加数据属性的时候还是很有意思的。当幻灯片不是活动幻灯片时,数据属性表示幻灯片的属性。您可以使用以下数据属性:
Data-x=幻灯片的X坐标
Data-y=幻灯片的Y坐标
数据比例=通过指定值进行缩放。如果数据比例为5,幻灯片的原始尺寸将放大5倍。
数据-旋转=将幻灯片旋转一定角度。
数据-旋转-x=用于3D。这个数字度数就是它应该相对于X轴旋转多少度。(向前/向后倾斜)
Data-rotate-y=用于3D。这个数字度数就是它应该相对于Y轴旋转多少度。(左回转/右回转)
Data-rotate-z=用于3D。这个数字度数就是它应该相对于Z轴旋转多少度。
实例目录:
以上是我对impress.js的初步了解,可能比较肤浅。此后,边肖将进一步研究它。请关注这个网站。