1、對(duì)impress.js認(rèn)識(shí)

　　impress.js 采用 CSS3 與 JavaScript 語言完成的一個(gè)可供開發(fā)者使用的表現(xiàn)層框架(演示工具)。

　　現(xiàn)在普通開發(fā)者可以利用 impress.js 自己開發(fā)出類似效果的演示工具，但性能比基于 FLASH 的 Prezi 更優(yōu)。其功能包括畫布的無限旋轉(zhuǎn)與縮放，任意角度放置任意大小的文字，CSS3 3D 效果支持等。同時(shí)，也支持傳統(tǒng) PowerPoint 形式的幻燈演示。

　　目前 impress.js 是基于 webkit 瀏覽器（Chrome、Safari）開發(fā)，而在其它基于非 webkit 引擎，但支持 CSS3 3D 的瀏覽器也能正常運(yùn)行。

2、使用impress.js

　　引入impress.js:

　　現(xiàn)在你可以看到創(chuàng)建一個(gè)新的幻燈片是多少的容易了。每個(gè)幻燈片是一個(gè)<div>元素 (在wrapper內(nèi)) 其class名稱叫做'step'。

　　雖然是創(chuàng)建一個(gè)簡(jiǎn)單的幻燈片，但你開始向你的幻燈片添加數(shù)據(jù)屬性時(shí)還是很有趣的。數(shù)據(jù)屬性表示它不是活動(dòng)幻燈片時(shí)你的幻燈片的屬性，您可以使用下面的數(shù)據(jù)屬性：

data-x = 幻燈片的x坐標(biāo)

data-y = 幻燈片的y坐標(biāo)

data-scale = 通過指定一個(gè)值來進(jìn)行縮放，data-scale為5則將會(huì)在你幻燈片原始尺寸基礎(chǔ)放大5倍

data-rotate = 通過一個(gè)數(shù)字度數(shù)來確定旋轉(zhuǎn)你的幻燈片

data-rotate-x = 為3D用，這個(gè)數(shù)字度數(shù)是它應(yīng)該相對(duì)x軸旋轉(zhuǎn)多少度。（前傾/后仰）

data-rotate-y = 為3D用，這個(gè)數(shù)字度數(shù)是它應(yīng)該相對(duì)y軸旋轉(zhuǎn)多少度。 （左擺/右擺）

data-rotate-z = 為3D用，這個(gè)數(shù)字度數(shù)是它應(yīng)該相對(duì)z軸旋轉(zhuǎn)多少度。

實(shí)例目錄：

以上內(nèi)容就是我對(duì)impress.js的初步理解，可能對(duì)此理解比較膚淺，之后小編還會(huì)深入研究，請(qǐng)網(wǎng)友持續(xù)關(guān)注本站。

最新評(píng)論