效果体验：http://keleyi.com/keleyi/phtml/html5/28.htm
以下是代码：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>模拟苹果ios系统页面过渡效果插件-柯乐义</title><base target="_blank" /> <link rel="stylesheet" href="http://keleyi.com/keleyi/phtml/html5/28/css/kontext.css"> <link rel="stylesheet" href="http://keleyi.com/keleyi/phtml/html5/28/css/demo.css"> </head> <body> <article class="keleyi"> <div class="layer one show"> <h2>整屏切换</h2> <p>切换请点击页面下方原点或使用键盘方向键。请使用<a href="http://keleyi.com/a/bjac/g039tue3.htm">支持HTML5的浏览器</a>查看本页 <a href="http://keleyi.com">首页</a> <a href="http://keleyi.com/a/bjad/pd076s6s.htm">原文</a><br /> <a href="http://keleyi.com/game/4/"><img src="http://keleyi.com/game/4/img/bg.jpg" style="height:300px;width:300px;" /></a> </p> </div> <div class="layer two"> <h2>第二层</h2> <p><a href="http://keleyi.com/a/bjac/iqiiedy2.htm"><img src="http://keleyi.com/image/a/al25629g.jpg" /></a></p> </div> <div class="layer three"> <h2>第三层</h2> <p><a href="http://keleyi.com/keleyi/phtml/"><img src="http://keleyi.com/image/a/w0l6ov6h.png" /></a></p> </div> </article> <ul class="bullets"> </ul> <script src="http://keleyi.com/keleyi/phtml/html5/28/js/kontext.js"></script> <script> // Create a new instance of kontext var k = kontext( document.querySelector( '.keleyi' ) ); // 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 ); </script> </body> </html>
