首页 > 代码库 > ios页面过渡效果插件Kontext

ios页面过渡效果插件Kontext

2024-08-10 01:09:47   220人阅读

效果体验：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 kontextvar 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 layerfor( 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 changesk.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>

web前端资源：http://www.cnblogs.com/jihua/p/webfront.html

ios页面过渡效果插件Kontext


联系
我们