Difference between revisions of "Team:LZU-China/Cartoon"

(Created page with "{{Template:LZU_China/Playground/style}} {{Template:LZU_China/Playground/style2}} <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>...")
 
Line 24: Line 24:
 
}
 
}
 
</style>
 
</style>
 +
 +
<style>
 +
.top-banner {
 +
background-color: rgba(255, 255, 255, 0.55);
 +
}
 +
.top-banner a {
 +
color: #019135;
 +
}
 +
h1 {
 +
margin-top: 100px;
 +
font-family: 'Microsoft Yahei';
 +
font-size: 36px;
 +
color: #019157;
 +
}
 +
</style>
 +
<script type="text/javascript" src="https://2015.igem.org/Team:LZU-China/chz_cartoon1js?action=raw&ctype=text/javascript"></script>
 +
  
  
Line 36: Line 53:
 
<body>
 
<body>
 
    
 
    
 +
<div class="container">
 +
<div>
 +
<h2>Watch the Cartoon Before Your Wiki Journey</h2>
 +
</div>
 +
 +
<div class="wrapper">
 +
 +
<ul id="sb-slider" class="sb-slider">
 +
<li>
 +
<a href="http://www.cnblogs.com/lhb25/" target="_blank"><img src="http://7xlwcd.com1.z0.glb.clouddn.com/1.jpg" alt="image1"/></a>
 +
<div class="sb-description">
 +
<h3>1. </h3>
 +
</div>
 +
</li>
 +
<li>
 +
<a href="http://www.cnblogs.com/lhb25/" target="_blank"><img src="http://7xlwcd.com1.z0.glb.clouddn.com/2.jpg" alt="image2"/></a>
 +
<div class="sb-description">
 +
<h3>2. </h3>
 +
</div>
 +
</li>
 +
<li>
 +
<a href="http://www.cnblogs.com/lhb25/" target="_blank"><img src="http://7xlwcd.com1.z0.glb.clouddn.com/3.jpg" alt="image1"/></a>
 +
<div class="sb-description">
 +
<h3>3. </h3>
 +
</div>
 +
</li>
 +
<li>
 +
<a href="http://www.cnblogs.com/lhb25/" target="_blank"><img src="http://7xlwcd.com1.z0.glb.clouddn.com/4.jpg" alt="image1"/></a>
 +
<div class="sb-description">
 +
<h3>4. </h3>
 +
</div>
 +
</li>
 +
</ul>
 +
 +
<div id="shadow" class="shadow"></div>
 +
 +
<div id="nav-arrows" class="nav-arrows">
 +
<a href="#">Next</a>
 +
<a href="#">Previous</a>
 +
</div>
 +
 +
<div id="nav-dots" class="nav-dots">
 +
<span class="nav-dot-current"></span>
 +
<span></span>
 +
<span></span>
 +
<span></span>
 +
</div>
 +
 +
</div><!-- /wrapper -->
 +
 +
 +
 +
 +
<div class="footer-banner" style="width:728px; margin:30px auto"></div>
 +
</div>
 +
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
 +
<script type="text/javascript" src="https://2015.igem.org/Team:LZU-China/chz_cartoon0js?action=raw&ctype=text/javascript"></script>
 +
<script type="text/javascript">
 +
$(function() {
 +
 +
var Page = (function() {
 +
 +
var $navArrows = $( '#nav-arrows' ).hide(),
 +
$navDots = $( '#nav-dots' ).hide(),
 +
$nav = $navDots.children( 'span' ),
 +
$shadow = $( '#shadow' ).hide(),
 +
slicebox = $( '#sb-slider' ).slicebox( {
 +
onReady : function() {
 +
 +
$navArrows.show();
 +
$navDots.show();
 +
$shadow.show();
 +
 +
},
 +
onBeforeChange : function( pos ) {
 +
 +
$nav.removeClass( 'nav-dot-current' );
 +
$nav.eq( pos ).addClass( 'nav-dot-current' );
 +
 +
}
 +
} ),
 +
 +
init = function() {
 +
 +
initEvents();
 +
 +
},
 +
initEvents = function() {
 +
 +
// add navigation events
 +
$navArrows.children( ':first' ).on( 'click', function() {
 +
 +
slicebox.next();
 +
return false;
 +
 +
} );
 +
 +
$navArrows.children( ':last' ).on( 'click', function() {
 +
 +
slicebox.previous();
 +
return false;
 +
 +
} );
 +
 +
$nav.each( function( i ) {
 +
 +
$( this ).on( 'click', function( event ) {
 +
 +
var $dot = $( this );
 +
 +
if( !slicebox.isActive() ) {
 +
 +
$nav.removeClass( 'nav-dot-current' );
 +
$dot.addClass( 'nav-dot-current' );
 +
 +
}
 +
 +
slicebox.jump( i + 1 );
 +
return false;
 +
 +
} );
 +
 +
} );
 +
 +
};
 +
 +
return { init : init };
 +
 +
})();
 +
 +
Page.init();
  
 +
});
 +
</script>
  
  

Revision as of 12:17, 18 September 2015

Team:LZU 2015

Watch the Cartoon Before Your Wiki Journey

  • image1

    1.

  • image2

    2.

  • image1

    3.

  • image1

    4.