介紹一下 impress.js是一個非常炫酷的幻燈片展示框架，依靠CSS3技術。 impress.js使用起來非常簡單，下麵就來簡單介紹一下其用法。 Start 首先，當然要引入impress.js。 在div標簽設置id為impress（不要求一定是div），然後在你想進行展示的地方加上calss ...
介紹一下
impress.js是一個非常炫酷的幻燈片展示框架，依靠CSS3技術。
impress.js使用起來非常簡單，下麵就來簡單介紹一下其用法。
Start
首先，當然要引入impress.js。
在div標簽設置id為impress（不要求一定是div），然後在你想進行展示的地方加上calss：step，每一個step就相當於一張幻燈片。與.step同級通常會自己定義一個id，這個id主要用來在url中進行辨認序數，播放第幾張的時候其id就會顯示在url中，當然也可以直接用此錨點來訪問指定的地方；如果沒有定義，則預設為step-N（N為序數）。
fallback
如果用戶的瀏覽器不支持這麼炫酷的特效，框架會自動展示class為fallback-message中的內容，做個相容。
一些屬性
在.step的同級定義一些屬性：
中心點：整個元素的中心點
data-x：距中心點x軸的坐標
data-y：距中心點y軸的坐標
data-z：相當於垂直於屏幕的距離
data-transition-duration：動畫切換持續的時間，預設為1s
data-perspective：視距，預設為1000，不太瞭解視距的可以自行學習下
data-rotate：順時針旋轉的度數
data-rotate-x：以x軸為中心旋轉，通常用來製造3D效果
data-rotate-y：以y軸為中心旋轉，通常用來製造3D效果
data-rotate-z：等同於data-rotate
三種狀態
impress.js提供三種狀態，分別是未展示（future），展示中（present），已展示（past）
這幾個狀態會作為class添加在元素上，方便使用者根據自己需求進行操作
事件
impress().init()：初始化（必須）
impress().next()：過渡到下一個展示的元素
impress().prev()：過渡到前一個展示的元素
impress().goto(Index | Id | El, [duration])：過渡到指定的元素（序數 | Id | 元素，過渡時間）
Last
用法比較簡單，過渡動畫也比較流暢，最終效果很炫酷
作者建議在紙上構思好整個排版之後，在進行擼碼哈～
如果感興趣請看作者源碼
