html5 3D页面层叠切换效果代码



149 593 198



特效描述:html5 3D页面层叠切换,3D页面切换效果

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/demo.css">
<link rel="stylesheet" href="css/kontext.css">

2. 引入JS

<script src="js/kontext.js"></script>

3. 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>
<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>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动切换 滑动选项卡切换 叠加浮动层 选项卡切换 滑动手风琴 重叠层叠叠加 转动旋转翻转 渐隐切换 淡出淡入淡进 图片叠加 图片翻转旋转 图片淡出淡进 图片切换 选项卡自动切换

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到