"
Team:Tsinghua/Human practice/Gallery
From 2014.igem.org
(Difference between revisions)
GuoQiangChen (Talk | contribs) |
GuoQiangChen (Talk | contribs) |
||
| Line 2: | Line 2: | ||
{{Team:Tsinghua/CSS/Nav-Style}} | {{Team:Tsinghua/CSS/Nav-Style}} | ||
{{Team:Tsinghua/CSS/iGEM-Top-Style}} | {{Team:Tsinghua/CSS/iGEM-Top-Style}} | ||
| - | {{Team:Tsinghua/CSS/ | + | {{Team:Tsinghua/CSS/demo}} |
| + | {{Team:Tsinghua/CSS/kontext}} | ||
| + | {{Team:Tsinghua/JS/kontext.js}} | ||
<html> | <html> | ||
| Line 70: | Line 72: | ||
<article class="content"> | <article class="content"> | ||
<h1>纯CSS3相册效果</h1> | <h1>纯CSS3相册效果</h1> | ||
| - | + | <div> | |
| + | <article class="kontext"> | ||
| + | <div class="layer one show"> | ||
| + | <h2>Kontext</h2> | ||
| + | <p><div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"></div></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> | ||
| + | </div> | ||
</article> | </article> | ||
<footer> | <footer> | ||
Revision as of 07:22, 17 October 2014
