webSlide - PPT演示文檔javascript框架

webSlide是用于在線PPT演示文檔的javascript框架

鳴謝

webSlide的想法來自于impress.js，但是本人在使用過程中發現impress.js經常卡，尤其是當演示文檔頁面和圖片比較多之時，經常出現動畫效果不流暢。

寫webSlide代碼過程中，研究過impress.js和reveal.js，向兩位作者表示感謝。

演示頁面

演示頁面地址http://ksky521.github.com/webSlide/，由于頁面比較多，所以需要一定的加載時間。

國內可以訪問SAE上的演示頁面：http://qdemo.sinaapp.com/ppt/udc.htm。

演示頁面內容為給公司UDC部門同事進行javascript入門培訓的內容~

說明

因為是PPT演示文檔，所以需要投影儀分辨率，所以演示頁面的最佳分辨率為全屏模式下的 1024*768 ，如果在自己電腦上查看，可以通過 ctrl + - 和 ctrl + + 縮放到合適的比例查看效果。

建議瀏覽器chrome 16+，全屏模式（F11），以達到最佳動畫效果。在Firefox下會出現拖尾現象，個人認為是Firefox 8下對CSS3動畫效果渲染太慢導致，其他瀏覽器未測試。

使用示例

wSlide({
    slideId:'slide',//演示文檔id
    canvasId:'myCanvas',//畫板id
    ctrlId:'slideCtrl'//控制部分id
});

參數說明

• slideId: 演示文檔內容部分ID，class為step為每頁，slide為帶邊框的頁面，必填
• canvasId: canvas元素畫板部分ID，選填
• ctrlId: 控制部分ID，class為home代表返回首頁，class為paint開啟畫板，class為clearIt清除畫板，選填
• presentClass: 當前幻燈片class，選填，默認為present
• pastClass: 上一頁幻燈片class，選填，默認為past
• futureClass: 下一頁幻燈片class，選填，默認為future

快捷鍵

• 空格/→/↓/Tab/pageDown：下一頁
• ←/↑/pageUp：上一頁
• P：開畫板
• C：清除畫板

版本庫地址

支持三種訪問協議：

• HTTP協議： https://ksky521@github.com/ksky521/webSlide.git 。
• Git協議： git://github.com/ksky521/webSlide.git 。
• SSH協議： ssh://git@github.com:ksky521/webSlide.git 。

克隆版本庫

操作示例：

$ git clone git://github.com/ksky521/webSlide.git

聯系方式

作者博客：js8.in

作者新浪微博：@三水清