Team:Tsinghua/Human practice/Gallery

From 2014.igem.org

(Difference between revisions)
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/demo}}
+
 
-
{{Team:Tsinghua/CSS/kontext}}
+
-
{{Team:Tsinghua/JS/kontext.js}}
+
<html>
<html>
Line 72: Line 70:
   <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:29, 17 October 2014


Team Tsinghua 2014 Return to iGEM 2014

纯CSS3相册效果

Retrieved from "http://2014.igem.org/Team:Tsinghua/Human_practice/Gallery"