引子

   断断续续用了好几天,终于把 impress.js 源码看完,作为刚入门的前端菜鸟,这是我第一次看 js 源码,最初还是比较痛苦的。不过还好,impress.js源码的注释相当清楚,每个函数和事件的作用都写得很详细,这让源码读起来更容易理解,此处手动给大神送糖果~~~

   接下来就由我给大家分享下 impress.js 效果是如何实现的、以及我们怎么利用它来实现特效。

impress.js的实现

我们在用 impress.js实现特效时,会用到类似下面的代码:

<div id="its" class="step" data-x="900" data-y="3000" data-rotate="90" data-scale="4">

我们看到代码中有data-x,data-y等属性,实际上我们就是通过改变这些属性的值来实现PPT的跳转的。这些属性分别代表:

  • data-x:幻灯片的X坐标

  • data-y:幻灯片的Y坐标

  • data-scale:幻灯片显示的缩放比例

  • data-rotate:幻灯片旋转的度数

  • data-rotate-x:3D使用,设置它相对X轴旋转多少度

  • data-rotate-y:3D使用,设置它相对Y轴旋转多少度

  • data-rotate-z:3D使用,设置它性对Z轴旋转多少度我们来看看impress源码中的 rotate函数:

//'rotate'对给定数据构造旋转变换
//默认旋转顺序为X,Y,Z,可以将参数设定为true来倒转顺序
var rotate = function( r, revert ) {
var rX = " rotateX(" + r.x + "deg) ",
rY = " rotateY(" + r.y + "deg) ",
rZ = " rotateZ(" + r.z + "deg) ";
return revert ? rZ + rY + rX : rX + rY + rZ;
};​

rotate函数的作用是将rotate对象转换成css使用的字符串。 用户自定义的数据通过data属性读取,并初始化给step对象。对应源码如下

:var data = el.dataset,
step = {
translate: {//对给定数据构造平移变换
x: toNumber( data.x ),
y: toNumber( data.y ),
z: toNumber( data.z )
},
rotate: {//对给定数据构造旋转变换
x: toNumber( data.rotateX ),
y: toNumber( data.rotateY ),
z: toNumber( data.rotateZ || data.rotate )
},
scale: toNumber( data.scale, 1 ),//对给定数据构造缩放变换
el: el
};​

我们在编写HTML时,通过改变data的属性值实现页面切换,那么在源码中,又是怎么来实现的呢? 在impress.js源码中,主要通过三个事件来实现impress的运行,它们分别是impress:init,impress:stepenter和impress:stepleave,在了解这些事件之前,先明白 step 这个概念,一个step就相当于PPT中的一页,每切换一页就相当于切换一个step。每一次切换都会触发上面所提到的两个事件:impress:stepenter和impress:stepleave,从而达到页面跳转的效果。

我们在使用 impress.js的时候,需要调用impress.js中的impress().init()函数:`

<script type="text/javascript">impress().init();</script>

init() 函数是 impress 的主初始化函数,它的作用是初始化 impress API ,从而运行impress。在 init() 函数的结尾触发 impress:init事件,这样绑定上去的函数就会全部触发了。以下代码即是触发 impress:init事件:

triggerEvent( root, "impress:init", { api: roots[ "impress-root-" + rootId ] } );
};

Triggerevent()方法:触发指定对象的指定事件,并且立即执行该事件中的脚本。Triggerevent构造一个事件,该事件以 'eventnam'命名,用detail处理数据,并在el上执行。源码如下:

var triggerEvent = function( el, eventName, detail ) {
var event = document.createEvent( "CustomEvent" );
event.initCustomEvent( eventName, true, true, detail );
el.dispatchEvent( event );
};​

接下来我们看看 impress:init事件上绑定了哪些函数:(1)为step添加一些有用的类:

root.addEventListener( "impress:init", function() {
// STEP CLASSES
steps.forEach( function( step ) {
step.classList.add( "future" );//所有尚未展示的 steps 都添加到都添加 `future` 类
} );
root.addEventListener( "impress:stepenter", function( event ) {
event.target.classList.remove( "past" );
event.target.classList.remove( "future" );
event.target.classList.add( "present" ); // 当某个step 被展示,`future`类会被移除,并被添加上 `present`类
}, false );
root.addEventListener( "impress:stepleave", function( event ) {
event.target.classList.remove( "present" );
event.target.classList.add( "past" );//当某个step结束时, `present` 又会被替换成`past`类
}, false );
}, false );​

通过上面的方法,每个 step 都会处于 futurepresent 和 past三个状态中的一个,这样使得我们在切换PPT的时候可以前后任意切换。
上面代码中用到了addEventListener() 方法,该方法用于向指定元素添加事件句柄。语法如下:element.addEventListener(event,function,useCapture);
参数 event:必需,指定事件名,不要使用"on"前缀;
function:指定事件要触发时执行的函数;
useCapture:可选(布尔值),指定事件是否在捕获或者冒泡时执行。
可使用 removeEventListener() 方法来移除 addEventListener() 方法添加的事件句柄。

(2)添加hash变化支持:

root.addEventListener("impress:init", function(){

  var lastHash = "";  // 将lasthash清空
// `#step-id`将被替换成`#/step-id`以防止浏览器在默认状态下滚动至hash表中所保存元素所在位置
//
// 而且添加hash的操作必须在动画结束以后进行, 因为在Chrome里会导致动画延迟
// BUG: http://code.google.com/p/chromium/issues/detail?id=62820
root.addEventListener("impress:stepenter", function (event) {
window.location.hash = lastHash = "#/" + event.target.id;
}, false); window.addEventListener("hashchange", function () {
// 当某一step被展示时,location里的hash已经更新(就在上面几行)
// 所以hash change事件被触发,我们将在同一step上再一次调用`goto`方法。
// 为了避免这一情况,我们将存储上一次 hash 的结果并比较.
if (window.location.hash !== lastHash) {
goto( getElementFromHash() );
}
}, false); // 开始
// 选择记录在url中的step地址,或者演示文稿的第一张step
goto(getElementFromHash() || steps[0], 0);
}, false);​

window.location.hash: hash 属性是一个可读可写的字符串,该字符串是 URL 的锚部分(从 # 号开始的部分)。
location.hash可以用来获取或设置页面的标签值。
通过 window.location.hash=hash这个语句来调整地址栏的地址,使得浏览器里边的“前进”、“后退”按钮能正常使用。

(3)导航事件
键盘处理导航:
按键被按下时:

// 防止不允许被按下的键被意外按下
document.addEventListener("keydown", function ( event ) {
if ( event.keyCode === 9 || ( event.keyCode >= 32 && event.keyCode <= 34 ) || (event.keyCode >= 37 && event.keyCode <= 40) ) {
event.preventDefault();
}
}, false);​

preventDefault() 方法阻止元素发生默认的行为。

按键弹起时,触发impress动作(下一张或上一张):

    document.addEventListener("keyup", function ( event ) {
if ( event.keyCode === 9 || ( event.keyCode >= 32 && event.keyCode <= 34 ) || (event.keyCode >= 37 && event.keyCode <= 40) ) {
switch( event.keyCode ) {
case 33: // 上翻页
case 37: // 小键盘左
case 38: // 小键盘上
api.prev();
break;
case 9: // tab键
case 32: // 空格
case 34: // 下翻页
case 39: // 小键盘右
case 40: // 小键盘下
api.next();
break;
} event.preventDefault();
}
}, false);​
处理在当前演示 steps 上产生的单击事件(当前step上是否存在超链接): document.addEventListener("click", function ( event ) {
// 事件冒泡处理
// 检查单击的目标(及其祖先级容器)是否是超链接
var target = event.target;
while ( (target.tagName !== "A") &&
(target !== document.documentElement) ) {
target = target.parentNode;
} if ( target.tagName === "A" ) {
var href = target.getAttribute("href"); // 如果指向某一连接,跳转至这一连接
if ( href && href[0] === '#' ) {
target = document.getElementById( href.slice(1) );
}
} if ( api.goto(target) ) {
event.stopImmediatePropagation();//如果目标对象件被执行,将阻止剩下事件执行
event.preventDefault();
}
}, false);​
event.stopImmediatePropagation() 方法阻止剩下的事件处理程序被执行,该方法阻止事件在 DOM 树中向上冒泡。
处理在当前演示 steps 上产生的单击事件: document.addEventListener("click", function ( event ) {
var target = event.target;
// 查找距当前活跃step最近的不活跃step
while ( !(target.classList.contains("step") && !target.classList.contains("active")) &&
(target !== document.documentElement) ) {
target = target.parentNode;
} if ( api.goto(target) ) {
event.preventDefault();
}
}, false);
处理触摸屏上上轻击屏幕左边或者右边的事件:document.addEventListener("touchstart", function ( event ) {
if (event.touches.length === 1) {
var x = event.touches[0].clientX,
width = window.innerWidth * 0.3,
result = null; if ( x < width ) {
result = api.prev();
} else if ( x > window.innerWidth - width ) {
result = api.next();
} if (result) {
event.preventDefault();
}
}
}, false);

当窗口大小改变时,重新计算窗口大小:

window.addEventListener("resize", throttle(function () {
// 强制激活当前step
api.goto( document.querySelector(".step.active"), 500 );
}, 250), false);

impress总共有4个API,分别是goto(), init(), next(), prev()。
impress的切换主要通过 goto()来实现,goto API 跳转至以el参数(索引,id或元素名)标记的step 。prev API 按文档顺序跳回上一 step ,next API 按文档顺序跳向下一 step 。

[转] impress.js学习的更多相关文章

  1. impress.js学习总结

    impress.js是一个很有趣的用来替代PPT的展示用的js工具,它的灵感来自prezi 如果你要学习使用它,这里有很好的演示模板 使用它的第一步,下载 impress.js,引入到你的代码里,并执 ...

  2. Impress.js上手 - 抛开PPT、制作Web 3D幻灯片放映

    前言: 如果你已经厌倦了使用PPT设置路径.设置时间.设置动画方式来制作动画特效.那么Impress.js将是你一个非常好的选择. 用它制作的PPT将更加直观.效果也是嗷嗷美观的. 当然,如果用它来装 ...

  3. impress.js初体验

    概述 如果你已经厌烦了使用PowerPoint制作PPT,那么impress.js是一个非常好的选择,用它做的PPT更加直观,效果也非常的不错.装X是需要一定代价的,不过如果你是个前端爱好者那么一切就 ...

  4. 一统江湖的大前端(1)——PPT制作库impress.js

    <一统江湖的大前端>系列是自己的学习笔记,旨在介绍javascript在非网页开发领域的应用案例和发现各类好玩的js库,不定期更新.如果你对前端的理解还是写写页面绑绑事件,那你真的是有点O ...

  5. 如何用impress.js写有逼格的ppt

    概述 这是我学习课程impress让你的内容"舞"起来而做的总结和练手. 你可以点这里在线预览我做的ppt 注意:等加载完了之后,点击空格键翻页! 简化模板 下面是一个简化的模板 ...

  6. impress.js

    介绍一下 impress.js是一个非常炫酷的幻灯片展示框架,依靠CSS3技术. impress.js使用起来非常简单,下面就来简单介绍一下其用法. Start 首先,当然要引入impress.js. ...

  7. impress.js 中文注释

    impress.js 中文注释 玄魂 /** * impress.js *(本翻译并未完全遵照原作者的注释翻译) * Impress.js 是受 Prezi启发,基于现代浏览器的 CSS3 与 Jav ...

  8. 开胃小菜——impress.js代码详解

    README 友情提醒,下面有大量代码,由于网页上代码显示都是同一个颜色,所以推荐大家复制到自己的代码编辑器中看. 今天闲来无事,研究了一番impress.js的源码.由于之前研究过jQuery,看i ...

  9. js学习笔记:webpack基础入门(一)

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

随机推荐

  1. Java重写toString和泛型的使用

    一.在一个类中重写toString方法 public class Person { private String name; private int age; public Person() { } ...

  2. 初识Java Enum

    enum 的全称为 enumeration, 是 JDK 1.5  中引入的新特性,存放在 java.lang 包中. enum是关键字,感觉它跟class.interface是并列的,并且不能跟fi ...

  3. 异步IO的并发能力:backlog的配置很重要

    今天中午正准备完工的时候,发现一个让人抓狂的问题. 一个精简版的AIO应用理论上应该比一个完整版的AIO应用并发能力高一些(因为完整版的事务处理复杂一些),在同一台机器上测试. 但测试结果显示,精简版 ...

  4. 基于asp.net + easyui框架,一步步学习easyui-datagrid——实现分页和搜索(二)

    http://blog.csdn.net/jiuqiyuliang/article/details/19967031 目录: 基于asp.net + easyui框架,一步步学习easyui-data ...

  5. python XML梳理

    导入ElementTree模块 import xml.etree.ElementTree as ET 为了创建一个element实例,使用Element 构造函数或者SubElement()工厂函数. ...

  6. POJ-3295 Tautology (构造)

    https://vjudge.net/problem/POJ-3295 题意 有五种运算符和五个参数,现在给你一个不超过100字符的算式,问最后结果是否恒为1? 分析 首先明确各运算符的意义,K(&a ...

  7. Dubbo学习笔记4:服务消费端泛化调用与异步调用

    本文借用dubbo.learn的Dubbo API方式来解释原理. 服务消费端泛化调用 前面我们讲解到,基于Spring和基于Dubbo API方式搭建简单的分布式系统时,服务消费端引入了一个SDK二 ...

  8. 英文写作指南——《“compare to”等同“compare with”吗?》

  9. spring框架学习(四)AOP思想

    什么是AOP 为什么需要AOP 从Spring的角度看,AOP最大的用途就在于提供了事务管理的能力.事务管理就是一个关注点,你的正事就是去访问数据库,而你不想管事务(太烦),所以,Spring在你访问 ...

  10. spring框架学习(三)spring与junit整合测试

    package cn.mf.b_test; import javax.annotation.Resource; import org.junit.Test; import org.junit.runn ...