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的所有内容了，框架自己只是提供了切换的动画，具体效果就靠朋友们发挥本身的脑洞了，文中错误及不足欢迎朋友们留言指出，谢谢！