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 不错

推荐阅读更多精彩内容

  • Swift版本点击这里欢迎加入QQ群交流: 594119878最新更新日期:18-09-17 About A cu...
    ylgwhyh阅读 22,407评论 7 246
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 8,914评论 4 48
  • 在美团参加 hackathon 时,使用 impress.js 做了一个商家上线流程的复盘工具。觉得 impres...
    yeatszhang阅读 2,636评论 0 51
  • 韩愈《马说》:世有伯乐,然后有千里马。千里马常有,而伯乐不常有。其实,每个孩子都是一匹千里马,既然伯乐不常有,...
    Joanne_fa80阅读 446评论 0 3
  • 爱上一座城的 肯定是因为城里的人 爱上一个小镇的 肯定是因为乡愁和往事 江南美农,白墙小筑 迎着夕阳,让日子缓缓 ...
    南山五月雨阅读 159评论 0 1
  • “你想不想上天?” “怎么上?” “我把你宠上天。” 可惜 人生这场戏快唱完了。 不怪那天太冷 泪滴水成冰 春风...
    月亮说她ta忘记了阅读 89评论 0 0
  • ①听了粉猪的bicycle ②用比巴播放器放sss(super simple songs)放到一半。不知道一天听几...
    Lynn_1f06阅读 63评论 0 0
  • 我是你心上的圆月,你是我月上的明星———夜深月 我从被窝里爬起来,用手挡了挡窗外灿烂的阳光,抓过桌上的手机看时间,...
    次宸阅读 216评论 0 1