Impress JS 使用

公司内部要做knowlege sharing, 都已经到了HTML5时代应该有还不少的好东东, 网上搜了下果然有不少的HTML slides的工具, deckjs, reveal, slides 等等大概十来种吧。逐个看过效果后就决定由impressjs了，效果最炫。impressjs就是仿照prezi，之前也了解过prezi，觉得应该轻车熟路了。

Impress JS 介绍

ImpressJS 的github地址为https://github.com/impress/impress.js

Impress 源代码分析

impressjs 的代码量也不大,一千行左右，注释非常清晰，基本可以当文档读，有兴趣的可以自行去阅读.
我这里参考了这篇文章 https://segmentfault.com/a/1190000003018108
我大概列出几个关键的，有兴趣的话可以自己去结合上面的文章自己读源代码

大概分为几个主要函数：

pfx（）---它通过检测浏览器给css3属性加上当前浏览器可用的前缀，这样就不用人工手写'Webkit" ,"Moz" 'O' ,'ms' .'Khtml'等浏览器前缀
arrayify（） ---将Array-Like对象转换成Array对象
css（）----将指定属性应用到指定元素上
toNumber（）--- 将参数转换成数字，如果无法转换返回默认值
byId（）----通过id获取元素
$（）--- 返回满足选择器的第一个元素
$$（）----返回满足选择器的所有元素
triggerEvent（）--- 在指定元素上触发指定事件
translate（）----将translate对象转换成css使用的字符串
rotate（）----将rotate对象转换成css使用的字符串
scale（）---- 将scale对象转换成css使用的字符串
perspective（）----将perspective对象转换成css使用的字符串
getElementFromHash（）---- 根据hash来获取元素，hash就是URL中形如#step1的东西computeWindowScale（）---- 根据当前窗口尺寸计算scale。用于放大和缩小

ImpressJS 的几个API

API: goto(), init(), next(), prev()，initStep（）
基本上通过名字就知道这几个API的意思了

添加自己的按键处理函数

ImpressJS 中处理了几个按键， 如空格，方向键等，并不支持一键到鸟瞰图，所以要跳转到指定的页面比较麻烦，一般是通过跳转页面ID。这里我希望加一个返回键，到最后一个页面到鸟瞰图，方便随时跳转到自己的页面。 在处理按键的函数中加入 case27 也就是ESC 键的处理， 自己加个API去回到页面的最后

document.addEventListener("impress:init",
    function(event) {
        var api = event.detail.api;
        document.addEventListener("keydown",
        function(event) {
            if (event.keyCode === 9 || (event.keyCode >= 32 && event.keyCode <= 34) || (event.keyCode >= 37 && event.keyCode <= 40)) {
                event.preventDefault();
            }
        },
        false);
        document.addEventListener("keyup",
        function(event) {
            if (event.keyCode === 9 || (event.keyCode >= 32 && event.keyCode <= 34) || (event.keyCode >= 37 && event.keyCode <= 40) || event.keyCode==27) {
                switch (event.keyCode) {
                case 33:
                case 37:
                case 38:
                    api.prev();
                    break;
                case 32:
                case 34:
                case 39:
                case 40:
                    api.next();
                    break;
                 case 27:
                    api.end();
                    break;

                }
                event.preventDefault();
            }
        },
        false);

当然这个 api.end() 是要自己写的，很简单，你找到next，prev的地方自己加上end 就好了
这里是定义API

    var impress = window.impress = function(rootId) {
        if (!impressSupported) {
            return {
                init: empty,
                goto: empty,
                prev: empty,
                next: empty,
                end: empty
            };
        }

这里是实现API, 我们新加了一个end 的函数， 定义var end = steps[steps.length-1]; 就是最后一页，然后跳转到最后一页

       var prev = function() {
            var prev = steps.indexOf(activeStep) - 1;
            prev = prev >= 0 ? steps[prev] : steps[steps.length - 1];
            return goto(prev);
        };
        var next = function() {
            var next = steps.indexOf(activeStep) + 1;
            next = next < steps.length ? steps[next] : steps[0];
            return goto(next);
        };
        var end = function() {
            var end = steps[steps.length-1];
            return goto(end);
        };   

impress 和其他的结合

结合图表

听说百度的图说不错，试了下果然是不错，数据输入简单，有点类似excel. 显示效果看起来也是挺好的。建了个图表试了下，在线显示的确挺不错的，但是放到自己的页面中那些样式就消失了， 提供的代码原来不包含样式的。没有办法，只能放弃了，本来还是想用下国产的

页内动画

Impressjs 没有自带ppt那样的页面内部动画（如进入入场动画，出场动画等），但是impress 提供了几个接口去实现： impress:stepenter, impress:stepleave 等，结合javascript 还是可以实现的。看了一个例子（就是下面在线例子的一个，很酷）找到了animate css， 真的非常适合做presentation。 网上搜了下，没有什么其他更好的css 适合做ppt的动画效果了。
PS: impressjs 不支持页内段落动画 （开始显示一部分，按空格后再显示另一部分）。不知道作者以后会不会加上

Impress的几个在线例子

PS:有些例子的impressjs的代码是做过修改的
http://www.vaikan.com/docs/impress.js/impress.js.htm
http://www.hashdog.com/brochure 这个很酷，用了animate 的css
http://parhumm.github.io/presentation-learning-to-design/
http://pkoperek.github.io/bytecode-presentation
http://programma.piratenpartij.be
http://bartaz.github.com/meetjs/css3d-summit 这个有3d 效果
http://valeka.net/freelancer
http://johnpolacek.github.com/WhatTheHeckIsResponsiveWebDesign-impressjs/
http://www.medikoo.com/asynchronous-javascript/3d/
http://heathdutton.github.com/wappflow/presentation 类似于Prezi 的局部整体 还没弄明白怎么建的
http://duael.fr/voeux/2012/
http://exequiel09.github.com/symposium-presentation/
http://sylvainw.github.com/HTML5-Future/index_en.html
http://jasoncosper.com/talks/wcphx/wp201/
http://introtonode.herokuapp.com/
http://scottcheng.github.com/revolutionary-css3/
http://www.inf.usi.ch/faculty/pautasso/talks/2012/ifip-wg-sos/liquidws.html
http://www.inf.usi.ch/faculty/pautasso/talks/2012/soa-cloud-rest-tcc/rest-tcc.html
http://aht.github.com/whatisgit/
http://rudyonweb.net/f/useragent/
http://ewillhite.github.com/speed-drupal
http://madsgraphics.github.com/prez-coffeescript/
http://latech.pl/latech-steel-presentation/
http://manuelbaronetti.com.ar/demo-impress/en
http://www.toforge.com/wp-content/impressjs_amazonaws_cubes/index.html#/start
http://demo.doyoe.com/share/html5quest 这个做ppt 不错