Team:Tsinghua-A

From 2014.igem.org

(Difference between revisions)
Line 5: Line 5:
<head>
<head>
{{Team:Tsinghua-A/style}}
{{Team:Tsinghua-A/style}}
-
<!-- jQuery Tools (slider) -->
+
<style type='text/css'>
-
    <script src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>
+
@charset utf-8;
-
    <script>
+
-
        $(function() {
+
/* common */
-
        // initialize scrollable
+
body{background: #ddd;overflow-x: hidden;}
-
        $(".scrollable").scrollable().navigator();
+
#bd{width: 960px;margin: 100px auto;max-width: 960px;}
-
        });
+
-
    </script>
+
/* module: sliders */
-
 
+
#sliders{
-
    <!-- Navigation scroll follow -->
+
    border-radius: 5px;
-
    <script type="text/javascript">
+
    box-shadow: 1px 1px 4px #666;
-
        $(window).scroll(function () {
+
    padding: 1%;
-
            var scrollPos = $(window).scrollTop();
+
    background: #fff;
-
            if (scrollPos > 180) {
+
}
-
                $(".toc").addClass("stickBelowNavigation");
+
#overflow{
-
            } else {
+
    width: 100%;
-
                $(".toc").removeClass("stickBelowNavigation");
+
    overflow: hidden;
-
            }
+
}
-
        });
+
#sliders .inner{
-
    </script>
+
    width: 500%;
-
 
+
    transiton: all 1s linear;
 +
    -webkit-transition: all 1s linear;
 +
}
 +
#sliders article{
 +
    float: left;
 +
    width: 20%;
 +
}
 +
#sliders article .info{
 +
    position: absolute;
 +
    opacity: 0;
 +
    padding: 30px;
 +
    color: #666;
 +
    font-family: Arial;
 +
    transition: opacity 0.1s ease-out;
 +
    -webkit-transform: translateZ(0);
 +
    -webkit-transition: opacity 0.1s ease-out;
 +
}
 +
#sliders article .info h1{
 +
    font-size: 22px;   
 +
    font-weight: bold;
 +
    margin: 0 0 5px;
 +
}
 +
#sliders article .info a{
 +
    color: #666;
 +
    text-decoration: none;
 +
}
 +
 +
/* module: controls */
 +
#controls{
 +
    height: 50px;
 +
    width: 100%;
 +
    margin-top: -25%;
 +
}
 +
#controls label{
 +
    display: none;
 +
    width: 50px;
 +
    height: 50px;
 +
    opacity: 0.3;
 +
    cursor: pointer;   
 +
}
 +
#controls label:hover{
 +
    opacity: 1;
 +
}
 +
 +
/* module: active */
 +
#active{
 +
    width: 100%;
 +
    margin-top: 23%;
 +
    text-align: center;
 +
}
 +
#active label{
 +
    display: inline-block;
 +
    width: 10px;
 +
    height: 10px;
 +
    border-radius: 5px;
 +
    background: #bbb;
 +
    border-color: #777;
 +
}
 +
#active label:hover{
 +
    background: #ccc;
 +
}
 +
 +
/* input checked change style */
 +
#slider1:checked ~ #active label:nth-child(1),
 +
#slider2:checked ~ #active label:nth-child(2),
 +
#slider3:checked ~ #active label:nth-child(3),
 +
#slider4:checked ~ #active label:nth-child(4),
 +
#slider5:checked ~ #active label:nth-child(5){
 +
    background: #333;
 +
}
 +
#slider1:checked ~ #controls label:nth-child(5),
 +
#slider2:checked ~ #controls label:nth-child(1),
 +
#slider3:checked ~ #controls label:nth-child(2),
 +
#slider4:checked ~ #controls label:nth-child(3),
 +
#slider5:checked ~ #controls label:nth-child(4){
 +
    display: block;
 +
    float: left;
 +
    background: url(../img/prev.png) no-repeat;
 +
    margin-left: -70px;
 +
}
 +
#slider1:checked ~ #controls label:nth-child(2),
 +
#slider2:checked ~ #controls label:nth-child(3),
 +
#slider3:checked ~ #controls label:nth-child(4),
 +
#slider4:checked ~ #controls label:nth-child(5),
 +
#slider5:checked ~ #controls label:nth-child(1){
 +
    display: block;
 +
    float: right;
 +
    background: url(../img/next.png) no-repeat;
 +
    margin-right: -70px;
 +
}
 +
#slider1:checked ~ #sliders article:nth-child(1) .info,
 +
#slider2:checked ~ #sliders article:nth-child(2) .info,
 +
#slider3:checked ~ #sliders article:nth-child(3) .info,
 +
#slider4:checked ~ #sliders article:nth-child(4) .info,
 +
#slider5:checked ~ #sliders article:nth-child(5) .info{
 +
    opacity: 1;
 +
    transition: all 0.6s ease-out 1s;
 +
    -webkit-transition: all 0.6s ease-out 1s;
 +
}
 +
#slider1:checked ~ #sliders .inner{
 +
    margin-left: 0;
 +
}
 +
#slider2:checked ~ #sliders .inner{
 +
    margin-left: -100%;
 +
}
 +
#slider3:checked ~ #sliders .inner{
 +
    margin-left: -200%;
 +
}
 +
#slider4:checked ~ #sliders .inner{
 +
    margin-left: -300%;
 +
}
 +
#slider5:checked ~ #sliders .inner{
 +
    margin-left: -400%;
 +
}
 +
</style>
<div>
<div>
             <table>
             <table>
Line 48: Line 162:
                     <td>
                     <td>
-
 
+
                        <div id="bd">
-
----
+
    <input checked type="radio" name="slider" id="slider1">
-
<!-- Slider -->
+
    <input type="radio" name="slider" id="slider2">
-
            <div class="scrollable">  
+
    <input type="radio" name="slider" id="slider3">
-
              <div class="items">
+
    <input type="radio" name="slider" id="slider4">
-
                   <div>
+
    <input type="radio" name="slider" id="slider5">
-
                    <img src="https://static.igem.org/mediawiki/2014/6/6f/Tsinghua-A-home1.png"></img>
+
           
-
                  </div>
+
    <div id="sliders">
-
                  <div>
+
        <div id="overflow">
-
                    <https://static.igem.org/mediawiki/2014/8/80/White.png"></img>
+
              <div class="inner">
-
                  </div>
+
                   <article>
-
                  <div>
+
                      <div class="info">
-
                    <img src="https://static.igem.org/mediawiki/2013/b/bc/UChi_front3.jpg"></img>
+
                          <h1>Title1</h1>
-
                  </div>
+
                          <a href="#">Description1</a>
-
                  <div>
+
                      </div>
-
                    <img src="https://static.igem.org/mediawiki/2013/8/8a/UChi_front4.jpg"></img>
+
                      <img src="https://static.igem.org/mediawiki/2014/6/6f/Tsinghua-A-home1.png"/>
-
                  </div>
+
                  </article>
-
                  <div>
+
                  <article>
-
                    <img src="https://static.igem.org/mediawiki/2013/6/6d/UChi_front5.jpg"></img>
+
                        <div class="info">
-
                  </div>
+
                            <h1>Title2</h1>
-
                  <div>
+
                            <a href="#">Description2</a>
-
                    <img src="https://static.igem.org/mediawiki/2013/8/83/UChi_front6.jpg"></img>
+
                        </div>
-
                  </div>
+
                        <img src="https://static.igem.org/mediawiki/2014/8/80/White.png"/>
-
              </div>
+
                  </article>
-
              <div class="prev"></div>
+
                  <article>
-
              <div class="next"></div>
+
                        <div class="info">
-
              <div class="navi"></div>  
+
                            <h1>Title3</h1>
-
            </div>
+
                            <a href="#">Description3</a>
-
                      * <img src='https://static.igem.org/mediawiki/2014/6/6f/Tsinghua-A-home1.png';width:1000px; height:670px;">
+
                        </div>
 +
                        <img src="img/pic3.png"/>
 +
                    </article>
 +
                  <article>
 +
                      <div class="info">
 +
                            <h1>Title4</h1>
 +
                            <a href="#">Description4</a>
 +
                        </div>
 +
                    <img src="img/pic4.png"/>
 +
                </article>
 +
                <article>
 +
                    <div class="info">
 +
                        <h1>Title5</h1>
 +
                        <a href="#">Description5</a>
 +
                    </div>
 +
                    <img src="img/pic5.png"/>
 +
                </article>
 +
            </div>
 +
        </div>
 +
    </div>
 +
 +
    <div id="controls">
 +
          <label for="slider1"></label>
 +
          <label for="slider2"></label>
 +
          <label for="slider3"></label>
 +
          <label for="slider4"></label>
 +
          <label for="slider5"></label>
 +
    </div>
 +
 +
    <div id="active">
 +
        <label for="slider1"></label>
 +
        <label for="slider2"></label>
 +
        <label for="slider3"></label>
 +
        <label for="slider4"></label>
 +
        <label for="slider5"></label>
 +
    </div>
 +
</div>
<br>
<br>
                     </td>
                     </td>

Revision as of 19:24, 15 October 2014

Centre for Research and Interdisciplinarity (CRI)
Faculty of Medicine Cochin Port-Royal, South wing, 2nd floor
Paris Descartes University
24, rue du Faubourg Saint Jacques
75014 Paris, France
+33 1 44 41 25 22/25
team2013@igem-paris.org
Hit Counter by Digits
Copyright (c) 2013 igem.org. All rights reserved.
{{Team:Tsinghua-A/style}}





Retrieved from "http://2014.igem.org/Team:Tsinghua-A"