一、官方示例 项目地址：https://github.com/impress/impress.js 文件构成 impress： js impress.js（JavaScript文件，提供特效支持，核心库） css impress_demo.css（CSS文件，提供样式支持） html index.html（HTML文件，幻灯片入口） 二、HTML说明 头部 <!DOCTYPE html> <html lang=“en”> <head> <meta charset=“utf-8” /> …
/*！ MIT许可证授权- http://github.com/impress/impress.js * / /** * impress.js * * impress.js 是一个基于 CSS3转换和转换的强大功能的表示工具 * 在现代浏览器中使用，灵感来自 prezi. com 背后的理念。 * * * 版权2011-2012 Bartek Szopka (@bartaz) ，2016-2018 Henrik Ingo (@henrikingo) * * 根据MIT授权发布。 * * ———————————————— * 作者: Bartek Szopka，Henrik Ingo * 版本: …
简介 Mutation observer 是用于代替 Mutation events 作为观察DOM树结构发生变化时，做出相应处理的API。 方法 用来实例化一个Mutation观察者对象，其中的参数是一个回调函数，它是会在指定的DOM节点发送变化后，执行的函数，并且会被传入两个参数，一个是变化记录数组(MutationRecord)，另一个是观察者对象本身 new MutationObserver(function(records, itself){}); observe 在观察者对象上，注册需要观察的DOM节点，以及相应的参数 void observe(Node target, optio …
单例就是保证一个类只有一个实例，实现方法先判断实例存在与否，如果存在直接返回，如果不存在就创建了再返回，这就确保了一个类只有一个实例对象。在JavaScript里，单例作为一个命名空间提供者，从全局命名空间里提供一个唯一的访问点来访问该对象。 ① 对象字面量 var singleton = { attr : 1, method : function(){ return this.attr; } } var t1 = singleton ; var t2 = singleton ; t1 === t2 。 简单实用，不足之处在于没有什么封装性，所有的属性方法对外暴露。 ② 构造函数 functi …
早期的路由都是后端实现的，直接根据 url 来 reload 页面，页面变得越来越复杂服务器端压力变大，随着 ajax 的出现，页面实现非 reload 就能刷新数据，也给前端路由的出现奠定了基础。我们可以通过记录 url 来记录 ajax 的变化，从而实现前端路由。 本文主要讲两种主流方式实现前端路由。 History API 这里不细说每一个 API 的用法，大家可以看 MDN 的文档：https://developer.mozilla.org/.. 重点说其中的两个新增的API?history.pushState?和?history.replaceState 这两个 API 都接收三个参 …
如果滚动页面也是DOM没有解决的一个问题。为了解决这个问题，浏览器实现了一下方法，以方便开发人员如何更好的控制页面的滚动。在各种专有方法中，HTML5选择了scrollIntoView()作为标准方法。 scrollIntoView()可以在所有的HTML元素上调用，通过滚动浏览器窗口或某个容器元素，调用元素就可以出现在视窗中。如果给该方法传入true作为参数，或者不传入任何参数，那么窗口滚动之后会让调动元素顶部和视窗顶部尽可能齐平。如果传入false作为参数，调用元素会尽可能全部出现在视口中（可能的话，调用元素的底部会与视口的顶部齐平）。 不过顶部不一定齐平，例如： //让元素可见 docu …
介绍DOM里常见的三种节点类型（总共有12种，如docment）： 元素节点，属性节点以及文本节点，例如<h2 class=”title”>head</h2>，其中h2是元素节点，class是属性节点，head是文本节点，在这里你可以说h2这个元素节点包含一个属性节点和一个文本节点。其实几乎所有HTML的标签都是元素节点，而id, title, class等则是属性节点，而元素所包含的文本内容则是文本节点。 tagName和nodeName的语义是一样的，都是返回所包含标签的名称，例如上面的h2标签，都是返回h2，但是tagName只能在元素标签 …