impress.js是一個javascript的第三方類庫,可以實現ppt,動畫,切換等功能,在所有的web瀏覽器上均有不錯表現,但目前不支持手機瀏覽器。
下載地址: https://github.com/impress/impress.js
開始裝逼之前,首先看一下demo 地址: http://impress.github.io/impress.js/
怎麼樣,不是是相當酷炫?
如何使用
實際上文件的註釋就是一份完整的說明文檔,爲方便初學者理解學習,特意整理了一下,我將它分爲元素結構(頁面結構),元素屬性,回調函數,接下來我將依次介紹
元素結構
首先,impress.js不依賴任何外部樣式表及依賴庫(如jquery),這樣你就可以放心大膽的修改了,後面我會講到,需要注意的是,要實現的所有元素必須包含在<div id="impress"></div>這個根元素中,然後以頁爲單位,每一頁的內容又必需包含在<div class="step"></div>中,即簡單的頁面結構就是:
<div id="impress">
<div class="step">第一屏</div>
<div class="step">第二屏</div>
<div class="step">第三屏</div>
</div>
<div id="overview" class="step" data-x="3000" data-y="1500" data-scale="10">
</div>這個元素時用來顯示所有元素的,就相當於將所有的.step顯示在同一頁面上
根元素#impress之外
<div class="hint">
<p>使用<b>空格鍵</b>或<b>箭頭鍵</b>導航</p>
</div>
這個元素時一個特殊的提示框,用來在首頁展示你想展示的信息
<div class="fallback-message">
<p>Your browser <b>doesn't support the features required</b> by impress.js, so you are presented with a simplified version of this presentation.</p>
<p>For the best experience please use the latest <b>Chrome</b>, <b>Safari</b> or <b>Firefox</b> browser.</p>
</div>該元素是用來在你的瀏覽器不支持impress.js時給出提示信息的 以上幾個特殊的子元素可以沒有,不會影響使用,一個完整的結構如下:
<body>
<div class="fallback-message">
瀏覽器不支持提示
</div>
<div id="impress">
<div class="step">第一屏</div>
<div class="step">第二屏</div>
<div class="step">第三屏</div>
<div id="overview">全部</div>
</div>
<div class="hint">
使用提示
</div>
</body>後面我還會介紹到一些其他的元素用法
元素屬性
data-x:元素在x軸的位置
data-y:元素在y軸的位置
data-z:元素的z軸的位置
data-scale:元素縮放比例
data-rotate:元素旋轉角度 注意是相對於0度旋轉的角度
data-rotate-x: 元素繞x軸旋轉角度 同上
data-rotate-y: 元素繞y軸旋轉角度 同上
data-rotate-z: 元素繞z軸旋轉角度 同上
整個頁面你可以理解成一個無限大的三位座標系(自行腦補),然後所有的子元素在各個座標點上排列。
回調函數
首先你需要知道的是,impress.js將按照元素順序依次顯示元素,你可以給每個元素指定id,播放時url欄中的id即爲該頁面id,你也可以不指定,impress.js將默認爲你帶上step-1 step-2
實質上impress.js並沒有提供回調函數,但是正如我前面說過的,由於是源生的，所以我們可以修改源碼,修改impress.js文件中279行如下
var onStepEnter = function (step) {
if (lastEntered !== step) {
triggerEvent(step, "impress:stepenter");
lastEntered = step;
}
//頁面進入時的觸發事件
var url = location.href;
var stepId = url.substr(url.lastIndexOf('/')+1);
if(typeof goInStep == 'function'){
goInStep(stepId);
}else{
return false;
}
};
// `onStepLeave` is called whenever the step element is left
// but the event is triggered only if the step is the same as
// last entered step.
var onStepLeave = function (step) {
if (lastEntered === step) {
triggerEvent(step, "impress:stepleave");
lastEntered = null;
}
//頁面離開後加個觸發事件
var url = location.href;
var stepId = url.substr(url.lastIndexOf('/')+1);
if(typeof goInStep == 'function'){
goOutStep(stepId);
}else{
return false;
}
};新增兩個回調函數,一個在頁面進入時執行,一個在頁面離開時執行 分別爲goOutStep()和goInStep(); 參數爲該頁面id或者默認給上的step-1之類的標誌,其他需求請根據需要自行修改
擴展
在實現播放ppt功能時,我們經常需要顯示ppt進度,這時源生的好處就體現出來了,我們可以使用impress-progress.js,來爲其顯示進度條,具體使用就不再此處過多說明了。
下載地址:https://github.com/m42e/impress.js-progress
除了可以摸你ppt功能,你還可以利用它做一些諸如建立,頁面特效等功能,亦可根據需要任意修改,有次神器,祝各位同行在裝逼的道路上更有逼格! 本期裝逼指南就介紹到這裏