程序员装逼利器之impress.js

原创 2016年05月31日 13:38:30

impress.js是一个javascript的第三方类库,可以实现ppt,动画,切换等功能,在所有的web浏览器上均有不错表现,但目前不支持手机浏览器。

下载地址:    https://github.com/impress/impress.js

开始装逼之前,首先看一下demo 地址:    http://impress.github.io/impress.js/

怎么样,不是是相当酷炫?


如何使用

       实际上文件的注释就是一份完整的说明文档,为方便初学者理解学习,特意整理了一下,我将它分为元素结构(页面结构),元素属性,回调函数,接下来我将依次介绍

     

元素结构

      首先,impress.js不依赖任何外部样式表及依赖库(如jquery),这样你就可以放心大胆的修改了,后面我会讲到,需要注意的是,要实现的所有元素必须包含在<div id="impress"></div>这个根元素中,然后以页为单位,每一页的内容又必需包含在<div class="step"></div>中,即简单的页面结构就是:

<div id="impress">
    <div class="step">第一屏</div>
    <div class="step">第二屏</div>
    <div class="step">第三屏</div>
</div>
上述就是一个最简单的impress.js结构,在根元素#impress中,又包含一个特殊的子元素

<div id="overview" class="step" data-x="3000" data-y="1500" data-scale="10">
</div>

这个元素时用来显示所有元素的,就相当于将所有的.step显示在同一页面上


根元素#impress之外

<div class="hint">
    <p>使用<b>空格键</b>或<b>箭头键</b>导航</p>
</div>

这个元素时一个特殊的提示框,用来在首页展示你想展示的信息

<div class="fallback-message">
    <p>Your browser <b>doesn't support the features required</b> by impress.js, so you are presented with a simplified version of this presentation.</p>
    <p>For the best experience please use the latest <b>Chrome</b>, <b>Safari</b> or <b>Firefox</b> browser.</p>
</div>

该元素是用来在你的浏览器不支持impress.js时给出提示信息的 以上几个特殊的子元素可以没有,不会影响使用,一个完整的结构如下:

<body>
    <div class="fallback-message">
        浏览器不支持提示
    </div>
    <div id="impress">
        <div class="step">第一屏</div>
        <div class="step">第二屏</div>
        <div class="step">第三屏</div>
        <div id="overview">全部</div>
    </div>
    <div class="hint">
        使用提示
    </div>
</body>

后面我还会介绍到一些其他的元素用法


元素属性

data-x:元素在x轴的位置

data-y:元素在y轴的位置

data-z:元素的z轴的位置

data-scale:元素缩放比例

data-rotate:元素旋转角度 注意是相对于0度旋转的角度

data-rotate-x: 元素绕x轴旋转角度 同上

data-rotate-y: 元素绕y轴旋转角度 同上

data-rotate-z: 元素绕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之类的标志,其他需求请根据需要自行修改


扩展

在实现播放ppt功能时,我们经常需要显示ppt进度,这时源生的好处就体现出来了,我们可以使用impress-progress.js,来为其显示进度条,具体使用就不再此处过多说明了。

下载地址:https://github.com/m42e/impress.js-progress

除了可以摸你ppt功能,你还可以利用它做一些诸如建立,页面特效等功能,亦可根据需要任意修改,有次神器,祝各位同行在装逼的道路上更有逼格! 本期装逼指南就介绍到这里




      



版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

impress.js 非常牛逼的前端装X利器

查看原文查看在线演示Demo和更多原文内容教程:impress.js 非常牛逼的前端装X利器如果你已经厌烦了使用PowerPoint制作PPT,那么impress.js是一个非常好的选择,用它做的PP...

体验Impress.js

用腻了ppt,prezi的风格看起来更酷一点儿,无意中得知有Impress.js这么一个H5版的prezi,nice,值得一试。 关于Impress.js,网上教程很多,但说实话就跟教小朋友一样,一...

impress.js初探

impress.js代替ppt

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

超酷弦 web版PPT 基于impress.js 颠覆性在线演示应用

题记:最近看到impress.js,眼前一亮,发现超酷炫颠覆性在线演示系统,于是学者用了一下,主要是用的他的框架,然后样式上改了一下。 官方github连接 https://github.com/i...

Django 模板目录配置

Django 模板目录配置
  • wyqlxy
  • wyqlxy
  • 2016年07月18日 14:18
  • 1688

Django中URL正则表达式匹配

Django框架中的URL分发采用正则表达式匹配来进行,以下是正则表达式的基本规则:1官方演示代码:from django.conf.urls import urlfrom . import view...

impress.js 创建演示文档

impress.js是一个基于CSS3和现代浏览器,受Prezi.com的启发而创作出来的前端多功能演示js框架,可以用它来替代PowerPoint制作更加酷炫的PPT,如果你是一位前端开发者或者勉强...
  • ZKH_101
  • ZKH_101
  • 2017年04月05日 09:17
  • 143

impress.js 神器

  • 2015年12月09日 09:34
  • 35KB
  • 下载

impress.js源码及Demo

  • 2013年08月04日 09:15
  • 35KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:程序员装逼利器之impress.js
举报原因:
原因补充:

(最多只允许输入30个字)