<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>css3上下文过渡切换 - 网页模板</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="css/kontext.css">
<link rel="stylesheet" href="css/demo.css">
</head>
<body>
<article class="kontext">
<div class="layer one show">
<h2>网页模板</h2>
<p>适用浏览器：FireFox、Chrome、Safari、Opera、傲游、搜狗. 不支持IE8、360、世界之窗。</p><br>
<p>来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a></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>
<script src="js/kontext.js"></script>
<script>
// 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 );
</script>
</body>
</html>
css3上下文过渡切换 css3上下文过渡切换网页特效.zip
版权申诉
127 浏览量
2022-11-17
21:18:24
上传
评论
收藏 6KB ZIP 举报
css3上下文过渡切换 css3上下文过渡切换网页特效.zip （4个子文件） 
css3上下文过渡切换 css3上下文过渡切换网页特效 jiaoben977 css 
demo.css 2KB kontext.css 5KB
index.html 3KB js kontext.js 4KB资源评论
