體驗Impress.js

用膩了ppt，prezi的風格看起來更酷一點兒，無心中得知有Impress.js這麼一個H5版的prezi，nice，值得一試。

關於Impress.js，網上教程不少，但說實話就跟教小朋友同樣，一步一步的，又無聊又不得要領。

要我說，學Impress.js，只要幾分鐘~

1. 引入Impress.js，注意要在body末尾，也就是</body>標籤前引用，這樣裏面的代碼纔會在你的html加載完成後再執行。

   <script src=""></script>

   ""裏面填url。能夠是你下載到本地的，那麼這麼寫

   "./static/js/impress.js"

   也能夠是來自百度靜態資源庫，那麼這麼寫

   "http://apps.bdimg.com/libs/impress.js/0.5.3/impress.js"

   也能夠直接引用做者的示例工程的

   "http://impress.github.io/impress.js/js/impress.js"

   甚至直接引用我fork的

   "http://zhengxiaoyao0716.github.io/FunCodeImpress/static/js/impress.js"

2. 再在body末尾，也就是</body>前加一句

   <script>impress().init();</script>

   這樣Impress.js就初始化了。

3. 提供一個id爲impress的div，用來展現。但在這以前，咱們最好先提供一個class爲impress-not-supported的div，裏面再創建一個class爲fallback-message的div（其實直接把fallback-message補充到以前的div的class裏也成），而後在其內寫上若是瀏覽器不支持Impress.js時的提示。是的，網上的教程基本都這麼說的，然並卵，你的提示並無如其名般的僅在不支持時顯示。爲何呢？由於你還缺乏一個css樣式。Impress.js做者建議咱們定義本身的css樣式，怎麼定義能夠參照他提供的impress-demo.css。（然而我直接照搬引用了~就是懶~~~怎麼引用？見1，跟那差很少）

4. 而後，在id爲impress的div裏，你就能夠寫本身的內容了。我不會告訴你怎麼一步步去寫，無聊死了。你能夠先設想有一個很大的平面，而後在上面放上一塊塊的內容。每一塊內容就是一個div，指定其class爲step，這樣瀏覽時就會按定義的前後順序逐一瀏覽它們。而後再爲其增長一些屬性，來肯定它應該顯示在什麼座標上(data-x="?" data-y="?")，以什麼樣的旋轉角度（2維：data-rotate="?"，立體：data-rotate-x/y/z="?"），多大的大小(data-scale="?")

5. 最後是一些高級的用法：指定一個class爲overview的空白div，把它的座標位置、大小、旋轉設定好，好比座標設置在全部整個平面的中心，大小爲整個平面，因而你就獲得了一個全局的俯視圖。爲一個step的class增長slide標籤，那麼你就獲得了一張帶白色背景和一些特殊樣式的相似ppt單張的div，具體有還哪些樣式，怎麼用，多看一些示例的源碼就知道了。或者，直接看impress-demo.css裏面怎麼定義的，固然，這些樣式是須要引入impress-demo.css的，你不引入的話是沒有的。也能夠本身修改定義，事實上原做者建議你這麼作。

ok，看完以上內容，應該就能夠作本身的H5版prezi了。由於太簡單了因此懶得好好組織語言了。講的不明白的地方看看個人一個練手的源碼吧。

個人GitHub上的一個練手的做品