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

使用方法

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

<link rel="stylesheet" href="css/kontext.css">               
<script src="js/kontext.js"></script>
                

HTML结构

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

<article class="kontext">
    <!-- 第一个页面 -->
    <div class="layer one show">
      <h2>Kontext</h2>
      <p>A context-shift transition. Use the dots below or your keyboard arrows.</p>
    </div>
    <!-- 第二个页面 -->
    <div class="layer two">
      <h2>Layer Two</h2>
    </div>
    <!-- 第三个页面 -->
    <div class="layer three">
      <h2>Layer Three</h2>
    </div>
  </article>
  <ul class="bullets">
  </ul>
</article>
                

初始化插件

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

// 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 < len;="" i++="" )="" {="" var="" bullet="document.createElement(" 'li'="" );="" bullet.classname="i" =="=" 0="" 'active'="" :="" '';="" bullet.setattribute(="" 'index',="" i="" );="" bullet.onclick="function(" event="" )="" {="" k.show(="" event.target.getattribute(="" 'index'="" )="" )="" };="" bullet.ontouchstart="function(" event="" )="" {="" k.show(="" event.target.getattribute(="" 'index'="" )="" )="" };="" bulletscontainer.appendchild(="" bullet="" );="" }="" update="" the="" bullets="" when="" the="" layer="" changes="" k.changed.add(="" function(="" layer,="" index="" )="" {="" var="" bullets="document.body.querySelectorAll(" '.bullets="" li'="" );="" for(="" var="" i="0," len="bullets.length;" i="">< len;="" i++="" )="" {="" bullets[i].classname="i" =="=" index="" 'active'="" :="" '';="" }="" }="" );="" document.addeventlistener(="" 'keyup',="" function(="" event="" )="" {="" if(="" event.keycode="==" 37="" )="" k.prev();="" if(="" event.keycode="==" 39="" )="" k.next();="" },="" false="" );="" var="" touchx="0;" var="" touchconsumed="false;" document.addeventlistener(="" 'touchstart',="" function(="" event="" )="" {="" touchconsumed="false;" lastx="event.touches[0].clientX;" },="" false="" );="" document.addeventlistener(="" 'touchmove',="" function(="" event="" )="" {="" event.preventdefault();="" if(="" !touchconsumed="" )="" {="" if(="" event.touches[0].clientx=""> lastX + 10 ) {
      k.prev();
      touchConsumed = true;
    }
    else if( event.touches[0].clientX < lastx="" -="" 10="" )="" {="" k.next();="" touchconsumed="true;" }="" }="" },="" false="" );="">

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

在线预览    源码下载