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 lastX + 10 ) { k.prev(); touchConsumed = true; } else if( event.touches[0].clientXkontext.js模拟iOS页面切换的js插件的github地址为:https://github.com/hakimel/kontext
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!