Impress.js的使用

初介

impress.js是国外一位开发者受Prezi启发，采用CSS3与JavaScript语言完成的一个可供开发者使用的表现层框架(演示工具)。

普通开发者可以利用impress.js自己开发出类似效果的演示工具，但性能比基于Flash的Prezi更优。其功能包括画布的无限旋转与缩放，任意角度放置任意大小的文字，CSS3 3D效果支持等。同时，也支持传统PowerPoint形式的幻灯演示。

目前impress.js是基于webkit浏览器（Chrome、Safari）开发，而在其它基于非 webkit引擎，但支持 CSS3 3D 的浏览器也能正常运行。

演示 && 下载

官网：http://impress.github.io/impress.js/#/bored

王巍：http://about.onevcat.com/#/welcome

正逍遥：http://zhengxiaoyao0716.github.io/FunCodeImpress/#/bored

gitHub: https://github.com/impress/impress.js

配置使用

按照下边的结构，准备好html页面。

id="impress"为内容的载体(wrapper)。所有的动画内容(div)到包含在里边。
class="impress-not-supported"是当浏览器不支持时，显示给用户的信息。
记得引入css以及js。

<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=1024" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <title>impress.js</title>
    <link href="css/impress-demo.css" rel="stylesheet" />
</head>
<body>
    <div class="impress-not-supported">
    </div>
    <div id="impress">

    </div>
    <script src="js/impress.js"></script>
    <script>impress().init();</script>
</body>
</html>

创建一个页面，只需在载体中class="step"的<div>。<div>的id可有可无，当有id时url中的hash变化是随着id走；反之就是step-[num]，如:xx/xxx.html#step-3。

<div id="bored" class="step slide" data-x="-1000" data-y="-1500">
    <q>仿佛有<b>痛楚</b>如果我晕眩，那是因为幻觉丰盛，能量薄弱。</q>
</div>

一个step就是一个页面，也就是一屏。

数据属性

data-x div的x坐标
data-y div的y坐标
data-scale 通过指定一个值来进行缩放，data-scale为5则将会在你幻灯片原始尺寸基础放大5倍
data-roate 通过一个数字度数来确定旋转你的幻灯片
data-rotate-x 为3D用，这个数字度数是它应该相对x轴旋转多少度。（前倾/后仰）
data-rotate-y 为3D用，这个数字度数是它应该相对y轴旋转多少度。（左摆/右摆）
data-rotate-z 为3D用，这个数字度数是它应该相对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之类的标志,其他需求请根据需要自行修改。