impress.js中文API文檔

簡介：

本身看：https://impress.js.org/#/bored

內容：

HTML部分

一、根元素

<div id="container"><div>

全部步驟元素都要包括在這個根元素中，須要指定id，初始化時使用，若是不指定，impress框架會自行搜索id爲impress的元素，若是沒有則失敗

二、步驟元素

<div id="step1" class="step">
　　<p>這是第一張</p>
<div>

展現內容都要寫在步驟元素內，每個步驟元素對應一次切換；步驟元素必須有.step類，步驟元素能夠指定id，在自定義事件的時候使用

三、步驟元素位置

步驟元素的位置所有經過HTML5提供的「data-*」進行設置

<div id="step2" class="step" data-x="-1000" data-y="-1500" data-z="300">
　　<p>這裏展現了步驟元素的位置信息如何設置</p>
</div>

data-x:相對於步驟元素中心位置的X軸偏移量，單位爲px

data-y:相對於步驟元素中心位置的Y軸偏移量，單位爲px

data-z:相對於步驟元素中心位置的Z軸偏移量，單位爲px

<div id="step3" class="step" data-scale="3">
　　<p>這裏展現了步驟元素的縮放如何設置</p>
</div>    

data-scale:相對於其餘步驟元素的縮放倍率

<div id="step4" class="step" data-rotate="90">
　　<p>這裏展現了該步驟元素的旋轉量</p>
</div>

data-rotate:設置該步驟元素順時針方向的旋轉量（就是繞Z軸）

<div id="step5" class="step" data-rotate-x="90">
　　<p>這裏展現了該步驟元素繞X軸上的旋轉量</p>
</div>

data-rotate-x:設置該步驟元素繞X軸的旋轉量

<div id="step6" class="step" data-rotate-y="90">
　　<p>這裏展現了該步驟元素繞Y軸的旋轉量</p>
</div>

data-rotate-y:設置該步驟元素繞Y軸的旋轉量

<div id="step7" class="step" data-rotate-z="90">
　　<p>這裏展現了該步驟元素繞Z軸的旋轉量</p>
</div>

data-rotate-z:設置該步驟元素繞Z軸的旋轉量（和data-rotate效果同樣）

<div id="step8" class="step" data-rotate-order="xyz">
　　<p>這裏展現了該步驟元素在應用rotate屬性時繞x、y、z三個軸向上旋轉的前後順序</p>
</div>

data-rotate-order:設置改步驟元素在應用rotate屬性時繞x、y、z三個軸向上旋轉的前後順序，默認爲「xyz」’，既：先繞X軸旋轉，而後是Y軸，最後是Z軸，順序不同，最終效果也不同

注：若是有朋友搞不清楚X、Y、Z軸向問題，請看下面這張圖（圖片來源於張鑫旭的我的博客，http://www.zhangxinxu.com/wordpress/）

 

CSS部分

一、.past類

.past {
  display: none; }

　　已經展現過的步驟元素會被添加上此類

二、.present類

.present .rotating {
  transform: rotate(-10deg);
  transition-delay: 0.25s;
}

　　當前處於攝像機中心的步驟元素會被添加上此類，在添加動畫的時候，這個頗有用

三、.future類

.future {
  display: none;
}

　　還未展現過的步驟元素會被添加上此類

 

四、.active類

.step {
  opacity: 0.3;
  transition: opacity 1s;
}
.step.active {
  opacity: 1
}

　　當前處於攝像機中心的可見步驟元素會被添加上此類

五、.impress-on-*類

.impress-on-overview .step {
    opacity: 1;
    cursor: pointer;
}
.impress-on-step-1,
.impress-on-step-2,
.impress-on-step-3 {
  background: LightBlue;
}

　　當某個步驟元素正在展現時，body標籤上會被添加一個.impress-on-*類，*指代當前展現步驟元素的id

六、.impress-not-supported類

.impress-not-supported .step {
  display: inline-block;
}

　　當impress框架檢測到瀏覽器不支持所需的特性時，body標籤會自動被添加上該類，主要用於給用戶提示

JavaScript部分

一、impress([id])

var impressAPI = impress( "root" );

　　用於新建impress實例的工廠函數，接收一個id字符串做爲根元素，若是不傳，impress會默認搜索id爲impress的元素

二、.init()

impress().init();

　　初始化，每一個文檔只能有一個impress實例

三、.tear()

impress().tear();

　　將DOM元素重置爲初始狀態，既init()前的狀態，高端玩家用於定製的操做

四、.next()

var api = impress();
api.init();
api.next();

　　展現下一個，自定義操做的時候頗有用

五、.prev()

var api = impress();
api.init();
api.prev();

　　展現上一個，自定義操做的時候頗有用

六、.goto(stepIndex|stepElementId|stepElement,[duration])

//接收步驟元素的索引
var api = impress();
api.init();
api.goto(7);

//接收步驟元素的id
var api = impress();
api.init();
api.goto( "overview" );

//接收步驟元素
var overview = document.getElementById( "overview" );
var api = impress();
api.init();
api.goto( overview );

　　展現指定步驟元素，可接收步驟元素索引、id及該元素自己做爲參數，第二個可選參數表示切換時間，單位爲毫秒

七、事件

var rootElement = document.getElementById( "impress" );
rootElement.addEventListener( "impress:init", function() {
  console.log( "Impress init" );
});
impress().init();

　　「impress:init」：初始化後會觸發該事件

var rootElement = document.getElementById( "impress" );
rootElement.addEventListener( "impress:stepenter", function(event) {
  var currentStep = event.target;
  console.log( "Entered the Step Element '" + currentStep.id + "'" );
});

　　「impress:stepenter」：下一個步驟元素進入展現時會觸發該事件

var rootElement = document.getElementById( "impress" );
rootElement.addEventListener( "impress:stepleave", function(event) {
  var currentStep = event.target;
  var nextStep = event.detail.next;
  console.log( "Left the Step Element '" + currentStep.id + "' and about to enter '" + nextStep.id );
});

　　「impress:stepleave」：當前步驟元素離開展現時會觸發該事件

結語：

以上就是impress.js的所有內容了，框架自己只是提供了切換的動畫，具體效果就靠朋友們發揮本身的腦洞了，文中錯誤及不足歡迎朋友們留言指出，謝謝！