impress 语法,impress用法及例句,谈谈impress.js初步理解

impress 语法,impress用法及例句,谈谈impress.js初步理解

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的初步了解,可能比较肤浅。此后,边肖将进一步研究它。请关注这个网站。

impress 语法,impress用法及例句,谈谈impress.js初步理解