impress.js表現層框架(演示工具)-初體驗

2024-08-30 08:34:56

字體：大中小

來源：轉載

供稿：網友

博客一歇就是半年，略慚愧...元旦假期各種愜意：打打Dota(悲催的輸多贏少)、滑滑雪；吃吃東西、逛逛街。轉眼兒今天就得上班了，5點早早起床(最近堅持早睡早起)，忍不住分享下前段時間發現的前端工程師裝X的利器，所以這新年第一篇博文誕生了:)
你希望別人看到你的演示文稿會發出“wow”嗎？你希望使用華麗的效果來震驚你的觀眾嗎？那咱們往下看
------------------正文分割線------------------
概述
如果你已經厭煩了使用PowerPoint制作PPT，那么impress.js是一個非常好的選擇，用它做的PPT更加直觀，效果也非常的不錯。裝X是需要一定代價的，不過如果你是個前端愛好者那么一切就沒問題了。當然如果你能勉強明白HTML和CSS也沒問題，看看這篇文章 + 一點點實踐（把官網上的例子拿來改改）即可...
impress.js 是國外一位開發者受 Prezi 啟發，采用 CSS3 與 JavaScript 語言完成的一個可供開發者使用的表現層框架(演示工具)。現在普通開發者可以利用 impress.js 自己開發出類似效果的演示工具，但性能比基于 FLASH 的 Prezi 更優。其功能包括畫布的無限旋轉與縮放，任意角度放置任意大小的文字，CSS3 3D 效果支持等。同時，也支持傳統 PowerPoint 形式的幻燈演示。
目前 impress.js 是基于 webkit 瀏覽器（Chrome、Safari）開發，而在其它基于非 webkit 引擎，但支持 CSS3 3D 的瀏覽器也能正常運行。
impreess源碼已經發布在GitHub上，地址：https://github.com/bartaz/impress.js
官方demo地址：http://bartaz.github.com/impress.js
因為在其項目網頁中卻沒有找到說明文檔&使用文檔，所以這篇文章將一步一步創建一個較初級的演示文稿，我們接著往下走。
請準備好現代瀏覽器：Google Chrome(效果最佳)、Safari或FF.
*我的IE10不支持，不知道為什么很多資料上寫著IE10也能支持，背了個催。

配置
html5頁面結構先準備就緒
創建一個id="impress"的wrapper(載體)，直接div就好，其他標簽同樣也可以
在body標簽結束前引入impress.js文件并且調用
class="impress-not-supported"是當瀏覽器不支持時顯示給用戶的提示信息，降級處理你懂的，不多解釋哈

復制代碼

上一篇：CSS(Cascading Style Sheet)級聯樣式表常用術語總結

下一篇：html5中幾個不容錯過的api或者tips小結