html页面切换插件,一款模拟iOS页面切换的js插件

kontext.js是一款模拟iOS页面切换的js插件。通过kontext.js插件，你可以制作出炫酷的页面切换效果。

使用方法

在页面中引入kontext.js文件和样式文件kontext.css。

HTML结构

使用kontext.js插件最简单的HTML结构如下。

Kontext

A context-shift transition. Use the dots below or your keyboard arrows.

Layer Two

Layer Three

初始化插件

在页面底部通过下面的方法来初始化该插件。

// Create a new instance of kontext

var k = kontext( document.querySelector( '.kontext' ) );

// API METHODS:

// k.prev(); // Show prev layer

// k.next(); // Show next layer

// k.show( 3 ); // Show specific layer

// k.getIndex(); // Index of current layer

// k.getTotal(); // Total number of layers

// DEMO-SPECIFIC:

var bulletsContainer = document.body.querySelector( '.bullets' );

// Create one bullet per layer

for( var i = 0, len = k.getTotal(); i lastX + 10 ) {

k.prev();

touchConsumed = true;

}

else if( event.touches[0].clientX

kontext.js模拟iOS页面切换的js插件的github地址为：https://github.com/hakimel/kontext