码迷,mamicode.com
首页 > 移动开发 > 详细

ios页面过渡效果插件Kontext

时间:2014-12-26 12:31:32      阅读:175      评论:0      收藏:0      [点我收藏+]

标签:

效果体验: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>

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

ios页面过渡效果插件Kontext

标签:

原文地址:http://www.cnblogs.com/jihua/p/kontext.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!