Team:OUC-China

From 2014.igem.org

(Difference between revisions)
Line 1: Line 1:
{{CSS/Main}}
{{CSS/Main}}
 +
<!doctype html>
<html>
<html>
-
    <link href="https://2014.igem.org/Team:OUC-China/css/bootstrap.css?action=raw&amp;ctype=text/css" rel="stylesheet" type="text/css" />
+
<head>
-
    <link href="https://2014.igem.org/Team:OUC-China/css/topsection.css?action=raw&ctype=text/css" rel="stylesheet" type="text/css" />
+
<meta charset="utf-8">
-
    <script src="https://2014.igem.org/Team:OUC-China/js/jquery.js?action=raw&ctype=text/javascript"></script>
+
<title>index</title>
-
    <script src="https://2014.igem.org/Team:OUC-China/js/bootstrap.js?action=raw&ctype=text/javascript"></script>
+
<script src="jquery-1.11.1.min.js"></script>
-
    <script src="https://2014.igem.org/Team:OUC-China/js/unslider.js?action=raw&ctype=text/javascript"></script>
+
<script type="text/javascript" src="jquery.devrama.slider.js"></script>
-
<style>
+
<style type="text/css">
-
        #silder,#silder > ul, #silder > ul > li {
+
@charset "utf-8";
-
            width:100%;
+
/* CSS Document */
-
            height:362px;
+
body, div, p, ul, li, h1, h2, h3, h4, h5, h6 {
-
        }
+
margin: 0px;
-
        #silder > ul {
+
padding: 0px;
-
            margin: 0;
+
font-family: "微软雅黑";
-
            padding: 0;
+
}
-
        }
+
body{
-
        #silder > ul > li {
+
    min-width:1350px;
-
            list-style: none;
+
}
-
        }
+
ul, ol {
-
            #silder > .dots {
+
list-style: none;
-
                position: relative;
+
}
-
                left: 0;
+
img {
-
                bottom: 20px;
+
display: block;
-
                text-align: center;
+
position: absolute;
-
                padding: 0;
+
}
-
                margin: 0 !important;
+
a {
-
            }
+
color: inherit;
-
                #silder > .dots > li {
+
text-decoration: none;
-
                    display: inline-block;
+
}
-
                    width: 10px;
+
@charset "utf-8";
-
                    height: 10px;
+
/* CSS Document */
-
                    margin: 0 4px 0 4px;
+
@keyframes bubleM {
-
                    border: 2px solid #5b97fb;
+
0% {
-
                    border-radius: 50%;
+
margin-top:0px;
-
                    cursor: pointer;
+
margin-left:0px;
-
                    text-indent: -999em;
+
}
-
                    opacity: .4;
+
25% {
-
                    -webkit-transition: background .5s, opacity .5s;
+
margin-top:3px;
-
                    -moz-transition: background .5s, opacity .5s;
+
margin-left:3px;
-
                    transition: background .5s, opacity .5s;
+
}
-
                }
+
50% {
-
                #silder > .dots > li.active {
+
margin-top:6px;
-
                    background: #5b97fb;
+
margin-left:0px;
-
                    opacity: 1;
+
}
-
                }
+
75% {
-
        .team {
+
margin-top:3px;
-
            height: 481px;
+
margin-left:-3px;
-
            background-color: #d2e9fd;
+
}
-
        }
+
100% {
-
        .team > div:first-child {
+
margin-top:0px;
-
            width: 1024px;
+
margin-left:0px;
-
            margin: 0 auto;
+
}
-
        }
+
}
-
        .team .nami {
+
@-webkit-keyframes bubleM {
-
            position: relative;
+
0% {
-
            height: 130px;
+
margin-top:0px;
-
            background-repeat: repeat-x;
+
margin-left:0px;
-
        }
+
}
-
        .team .plas {
+
25% {
-
            margin-top: 240px;
+
margin-top:3px;
-
            position: relative;
+
margin-left:3px;
-
            z-index: 5;
+
}
-
            -webkit-transition: all ease 0.4s;
+
50% {
-
            -moz-transition: all ease 0.4s;
+
margin-top:6px;
-
            -ms-transition: all ease 0.4s;
+
margin-left:0px;
-
            -o-transition: all ease 0.4s;
+
}
-
            transition: all ease 0.4s;
+
75% {
-
        }
+
margin-top:3px;
-
        .team .plas:hover {
+
margin-left:-3px;
-
            margin-top:230px;
+
}
-
        }
+
100% {
-
        .part {
+
margin-top:0px;
-
            height: 850px;
+
margin-left:0px;
-
            background-color: #609fd2;
+
}
-
            margin-top: -1px;
+
}
-
        }
+
.header {
-
        .part > ul {
+
width: 1200px;
-
          width: 1024px;
+
height: 50px;
-
          list-style: none;
+
margin: 0 auto;
-
          margin: 0  auto;
+
position: relative;
-
        }
+
}
-
        .part > ul > li {
+
.header .igemLogo {
-
            width: 440px;
+
transition: 0.5s;
-
            height: 235px;
+
-moz-transition: 0.5s;
-
            float:left;
+
-o-transition: 0.5s;
-
            margin: 20px;
+
-webkit-transition: 0.5s;
-
            background-color: #ffffff;
+
}
-
        }
+
.header .igemLogo:hover {
-
        .part > ul > li > p:first-child {
+
transform: rotate(360deg);
-
            display: block;
+
-webkit-transform: rotate(360deg);
-
            width: 100%;
+
-moz-transform: rotate(360deg);
-
            padding: 5px;
+
-o-transform: rotate(360deg);
-
            height: 50px;
+
-ms-transform: rotate(360deg);
-
        }
+
}
-
        .part > ul > li > p:first-child > img {
+
 
-
            display: inline-block;
+
.header .nav{
-
            width: 40px;
+
top: 10px;
-
            height: 40px;
+
left: 450px;
-
            margin-top: -20px;
+
}
-
        }
+
.header .Logo {
-
        .part > ul > li > p:first-child > span {
+
width: 70px;
-
            font-size: 30px;
+
height: 70px;
-
            padding-top: 10px;
+
background: url(images/14Logo.png);
-
            padding-left: 10px;
+
position: absolute;
-
            color: #222222;
+
right: 0;
-
            display: inline-block;
+
bottom: -10px;
-
        }
+
}
-
        footer {
+
.header .Logo ul {
-
            width: 100%;
+
position: absolute;
-
            height: 100px;
+
width: 250px;
-
            background-color: #2d6fa5;
+
height: 150px;
-
        }
+
display: none;
-
        footer p {
+
right: 0px;
-
            color: #ffffff;
+
top: 70px;
-
            font-size: 14px;text-align: right;
+
}
-
            padding-right: 20px;
+
.header .Logo li {
-
        }
+
height: 50px;
-
        footer p a {
+
width: 215px;
-
            color: #ffffff !important;
+
line-height: 50px;
-
        }
+
font-size: 14px;
-
        footer p a:hover {
+
background: #fff;
-
            color: #c7f1ff !important;
+
margin: 10px 0 20px 0;
-
        }
+
position: relative;
-
        .anchor {
+
border-bottom-left-radius: 6px;
-
            position: fixed;
+
border-top-left-radius: 6px;
-
            right: 10px;
+
}
-
            bottom: 10px;
+
.header .Logo li a {
-
            cursor: pointer;
+
margin-left: 5px;
-
            width: 60px;
+
}
-
            height: 60px;
+
.header .Logo li img {
-
            z-index: 20;
+
position: absolute;
-
            -webkit-transition: all ease 0.4s;
+
right: -35px;
-
            -moz-transition: all ease 0.4s;
+
top: -10px;
-
            -ms-transition: all ease 0.4s;
+
}
-
            -o-transition: all ease 0.4s;
+
.neck {
-
            transition: all ease 0.4s;
+
height: 512px;
-
        }
+
width: 100%;
-
        .anchor:hover {
+
background: rgb(76,145,190);
-
            -webkit-transform: scale(1.1);
+
}
-
            -moz-transform: scale(1.1);
+
.main {
-
            -ms-transform: scale(1.1);
+
}
-
            -o-transform: scale(1.1);
+
.main .part1 {
-
            transform: scale(1.1);
+
height: 480px;
-
        }
+
width: 100%;
-
        header {
+
background: rgb(210,233,253);
-
            background-color: #FFFFFF;
+
position: relative;
-
            height: 53px;
+
}
-
        }
+
.main .part1 .waveUp {
-
        header > div {
+
width: 100%;
-
            width: 1175px;
+
height: 130px;
-
            margin: 0 auto;
+
background: url(images/waveUp.png);
-
            height: 53px;
+
position: absolute;
-
        }
+
bottom: 0;
-
        header > div > img.igemlogo {
+
z-index: 0
-
            position: relative;
+
}
-
            z-index: 10;
+
.main .part1 .waveDown {
-
        }
+
width: 100%;
-
        header > div > div {
+
height: 130px;
-
            display: inline-block;
+
background: url(images/waveDown.png);
-
            margin: -120px auto 0 450px;
+
position: absolute;
-
            padding-top: 8px;
+
bottom: 0;
-
            float: left;
+
z-index: 3;
-
        }
+
}
-
        header > div > img.teamlogo {
+
.main .part1 img {
-
            margin-top: -25px;
+
bottom: 60px;
-
            position: relative;
+
transition: 0.3s;
-
            z-index: 10;
+
-moz-transition: 0.3s;
-
            width: 83px;
+
-o-transition: 0.3s;
-
            height: 83px;
+
-webkit-transition: 0.3s;
-
            margin-left: 597px;
+
}
-
        }
+
.main .part1 img:hover {
-
</style>
+
bottom: 80px;
-
    <script>
+
}
-
        if ($('.firstHeading')) $('.firstHeading').remove();
+
.main .part1 .objLeft {
-
        $('#top-section').css({ 'position': 'relative'});
+
left: 200px;
-
    </script>
+
}
-
        <header>
+
.main .part1 .objRight {
-
        <div>
+
right: 200px;
-
            <img class="igemlogo" src="https://static.igem.org/mediawiki/2014/3/3b/OUC-China_Index_IGEM.png" usemap="IGEM" />
+
}
-
            <map name="IGEM">
+
.main .part2 {
-
                <area shape="rect" href="https://igem.org/Main_Page" coords="0,0,80,54" alt="IGEM Homepage">
+
width: 100%;
-
            </map>
+
height: 905px;
-
            <div class="navbar navbar-inverse" style="margin-bottom:0">
+
background: rgb(96,159,210);
-
                <div class="navbar-collapse collapse navbar-inverse-collapse">
+
position: relative;
-
                    <ul class="nav navbar-nav">
+
}
-
                        <li class="active"><a href="#">HOME</a></li>
+
.main .part2 ul li {
-
                        <li class="dropdown">
+
position: absolute;
-
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">TEAM <b class="caret"></b></a>
+
display:none;
-
                            <ul class="dropdown-menu">
+
}
-
                                <li><a href="https://2014.igem.org/Team:OUC-China/Team">Team members</a></li>
+
.main .part2 ul li p{
-
                                <li><a href="https://2014.igem.org/Team:OUC-China/Team_Instructor">Instructor</a></li>
+
display: block;
-
                                <li><a href="https://2014.igem.org/Team:OUC-China/Team_Acknowledgment">Acknowledgment</a></li>
+
position: absolute;
-
                                <li><a href="https://2014.igem.org/Team:OUC-China/Team_Lab">Lab</a></li>
+
width: 184px;
-
                                <li><a href="https://igem.org/Team.cgi?year=2014&team_name=OUC-China">Official team profile</a></li>
+
color: rgb(49,129,194);
-
                            </ul>
+
text-align: center;
-
                        </li>
+
font-size:24px;
-
                        <li class="dropdown">
+
}
-
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">PROJECT <b class="caret"></b></a>
+
.main .part2 .buble {
-
                            <ul class="dropdown-menu">
+
animation-name: bubleM;
-
                                <li><a href="https://2014.igem.org/Team:OUC-China/Project">Overview</a></li>
+
animation-duration:1s;
-
                                <li><a href="https://2014.igem.org/Team:OUC-China/Project_Background">Background</a></li>
+
animation-timing-function: linear;
-
                                <li><a href="https://2014.igem.org/Team:OUC-China/Project_Design">Design</a></li>
+
animation-iteration-count: 10;
-
                                <li><a href="https://2014.igem.org/Team:OUC-China/Project_Result">Result</a></li>
+
animation-direction: alternate;
-
                                <li><a href="https://2014.igem.org/Team:OUC-China/Project_Future">Future</a></li>
+
animation-fill-mode: both;
-
                                <li><a href="https://2014.igem.org/Team:OUC-China/Project_Modeling">Modeling</a></li>
+
animation-play-state: running;
-
                            </ul>
+
-webkit-animation-name: bubleM;
-
                        </li>
+
-webkit-animation-duration: 0.3s;
-
                        <li class="dropdown">
+
-webkit-animation-timing-function: linear;
-
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">JUDGING <b class="caret"></b></a>
+
-webkit-animation-iteration-count: 7;
-
                            <ul class="dropdown-menu">
+
-webkit-animation-direction: alternate;
-
                                <li><a href="https://2014.igem.org/Team:OUC-China/Judging">Biobrick</a></li>
+
-webkit-animation-fill-mode: both;
-
                                <li><a href="https://2014.igem.org/Team:OUC-China/Judging_Achievment">Achievment</a></li>
+
-webkit-animation-play-state: running;
-
                            </ul>
+
}
-
                        </li>
+
.delay1 {
-
                        <li class="dropdown">
+
-moz-animation-delay: 0s;
-
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">SAFETY <b class="caret"></b></a>
+
}
-
                            <ul class="dropdown-menu">
+
.delay2 {
-
                                <li><a href="https://2014.igem.org/Team:OUC-China/Safety">Boi safety</a></li>
+
-moz-animation-delay: 0.4s;
-
                                <li><a href="https://2014.igem.org/Team:OUC-China/Safety_Lab_safety">Lab safety</a></li>
+
}
-
                                <li><a href="https://2014.igem.org/Team:OUC-China/Safety_Policy_Practise">Policy&Practise</a></li>
+
.delay3 {
-
                            </ul>
+
-moz-animation-delay: 0.8s;
-
                        </li>
+
}
-
                        <li class="dropdown">
+
.delay4 {
-
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">NOTEBOOK <b class="caret"></b></a>
+
-moz-animation-delay: 1.2s;
-
                            <ul class="dropdown-menu">
+
}
-
                                <li><a href="https://2014.igem.org/Team:OUC-China/HumanPractice">Lab note</a></li>
+
.delay5 {
-
                                <li><a href="https://2014.igem.org/Team:OUC-China/HumanPractice_Modeling_note">Modeling note</a></li>
+
-moz-animation-delay: 1.6s;
-
                                <li><a href="https://2014.igem.org/Team:OUC-China/HumanPractice_Protocols">Protocols</a></li>
+
}
-
                            </ul>
+
.delay6 {
-
                        </li>
+
-moz-animation-delay: 2s;
-
                    </ul>
+
}
-
                </div>
+
.main .part2 .lFish {
-
            </div>
+
left: 45px;
-
            <img class="teamlogo" src="https://static.igem.org/mediawiki/2014/0/0e/OUC-China_Index_Team.png" />
+
bottom: -95px;
-
        </div>
+
}
-
    </header>
+
.main .part2 .rFish {
-
    <div id="silder">
+
right: 45px;
 +
bottom: -100px;
 +
}
 +
.footer {
 +
width: 100%;
 +
height: 220px;
 +
background: rgb(45,111,165);
 +
}
 +
.footer #top {
 +
height: 150px;
 +
position: fixed;
 +
bottom: 30px;
 +
right: 30px;
 +
z-index: 1000;
 +
transition: 0.5s;
 +
}
 +
.footer #top:hover {
 +
transform: rotate(180deg);
 +
-moz-transform: rotate(180deg);
 +
-ms-transform: rotate(180deg);
 +
-o-transform: rotate(180deg);
 +
-webkit-transform: rotate(180deg);
 +
}
 +
@charset "utf-8";
 +
/* CSS Document */
 +
.nav {
 +
position: absolute;
 +
}
 +
.nav li {
 +
padding: 0 8px;
 +
float: left;
 +
position: relative;
 +
min-width: 80px;
 +
height: 40px;
 +
color: rgb(60,60,60);
 +
font-size: 24px;
 +
line-height: 40px;
 +
text-align: center;
 +
transition: 0.3s;
 +
-moz-transition: 0.3s;
 +
-o-transition: 0.3s;
 +
-webkit-transition: 0.3s;
 +
}
 +
.nav li:hover {
 +
background: rgb(146,205,253);
 +
color: #fff;
 +
}
 +
.nav .pMenu ul {
 +
display: none;
 +
position: absolute;
 +
top: 100%;
 +
left: 0px;
 +
overflow: hidden;
 +
border-bottom-left-radius: 6px;
 +
border-bottom-right-radius: 6px;
 +
}
 +
.nav .pMenu ul li {
 +
min-width: 220px;
 +
background: rgb(146,205,253);
 +
color: #fff;
 +
transition: 0.4s;
 +
-moz-transition: 0.4s;
 +
-o-transition: 0.4s;
 +
-webkit-transition: 0.4s;
 +
}
 +
.nav .pMenu ul li:hover {
 +
background: rgb(98,175,243);
 +
}
 +
.neck{ background-image:url(images/nav.png)}
 +
.example-animation {
 +
color: #FFF;
 +
font-size: 60px;
 +
}
 +
</style>
 +
</head>
 +
<body>
 +
<div class = "header"> <img src="images/plasmid.png" style="width:340px;height:110px;"/> <img class = "igemLogo" src="images/IGEMLogoS.png" style="left:360px"/>
 +
  <div class = "nav">
 +
    <ul>
 +
      <li>HOME</li>
 +
      <li class = "pMenu">TEAM
         <ul>
         <ul>
-
            <li style="background-image:url(https://static.igem.org/mediawiki/2014/2/20/OUC-China_Index_Slide1.png)"><h1 style="margin:50px">Coming soon...</h1></li>
+
          <li><a href="page.html">team members</a></li>
 +
          <li><a href="#">instructor</a></li>
 +
          <li><a href="#">Acknowledgement</a></li>
         </ul>
         </ul>
-
     </div>
+
      </li>
-
    <div class="team">
+
      <li>PROJECT</li>
-
        <div>
+
      <li>JUDING</li>
-
            TEAM
+
      <li>SAFETY</li>
-
            <img class="plas" src="https://static.igem.org/mediawiki/2014/4/41/OUC-China_Index_Plasmid1.png" style="float:left" />
+
      <li>NOTEBOOK</li>
-
            <img class="plas" src="https://static.igem.org/mediawiki/2014/e/e6/OUC-China_Index_Plasmid2.png" style="float:right" />
+
     </ul>
-
        </div>
+
  </div>
-
        <div class="nami" style="background-image:url(https://static.igem.org/mediawiki/2014/7/7e/OUC-China_Index_Tsunami1.png);margin-top:330px;z-index:1"> </div>
+
  <div class = "Logo pMenu">
-
        <div class="nami" style="background-image:url(https://static.igem.org/mediawiki/2014/8/83/OUC-China_Index_Tsunami2.png);margin-top:-130px;z-index:10"> </div>
+
    <ul>
-
    </div>
+
      <li><a href="#">2013:</a><img src="images/13logo.png"></li>
-
    <div class="part">
+
      <li><a href="#">2012:</a><img src="images/12Logo.png"></li>
-
        <ul>
+
    </ul>
-
            <li>
+
  </div>
-
                <p style="background-color:#99d6fc">
+
<script>
-
                    <img src="https://static.igem.org/mediawiki/2014/9/9c/OUC-China_Index_Part1.png" />
+
// JavaScript Document
-
                    <span>The double plasmid system</span>
+
$(".pMenu").mouseover(function(){
-
                </p>
+
  $(this).find("ul").slideDown();
-
            </li>
+
});
-
            <li>
+
$(".pMenu").mouseleave(function(){
-
                <p style="background-color:#fdfb7c">
+
  $(this).find("ul").slideUp(function(){
-
                    <img src="https://static.igem.org/mediawiki/2014/a/ad/OUC-China_Index_Part2.png" />
+
    $(this).clearQueue();
-
                    <span>Transfection</span>
+
  });
-
                </p>
+
});
-
            </li>
+
</script>
-
            <li>
+
</div>
-
                <p style="background-color:#6afd90">
+
<!--轮播效果-->
-
                    <img src="https://static.igem.org/mediawiki/2014/9/98/OUC-China_Index_Part3.png" />
+
<div class = "neck">
-
                    <span>Modeling</span>
+
<!-- 代码 开始 -->
-
                </p>
+
<div class="example-animation">
-
            </li>
+
<div data-lazy-background="images/1.jpg">
-
            <li>
+
<h3 data-pos="['0%', '110%', '10%', '5%']" data-duration="700" data-effect="move" >
-
                <p style="background-color:#fd9ea2">
+
Moving
-
                    <img src="https://static.igem.org/mediawiki/2014/4/44/OUC-China_Index_Part4.png" />
+
</h3>
-
                    <span>Judging</span>
+
<div data-pos="['-30%', '25%', '40%', '25%']" data-duration="700" data-effect="move">
-
                </p>
+
Text
-
            </li>
+
</div>
-
            <li>
+
<div data-pos="['56%', '-40%', '56%', '11%']" data-duration="700" data-effect="move">
-
                <p style="background-color:#faae80">
+
and Image
-
                    <img src="https://static.igem.org/mediawiki/2014/5/5f/OUC-China_Index_Part5.png" />
+
</div>
-
                    <span>Safety</span>
+
<div data-pos="['23%', '110%', '23%', '42%']" data-duration="700" data-effect="move">
-
                </p>
+
<img data-lazy-src="images/add.jpg"/>
-
            </li>
+
</div>
-
            <li>
+
</div>
-
                <p style="background-color:#d993ea">
+
<div data-lazy-background="images/2.jpg">
-
                    <img src="https://static.igem.org/mediawiki/2014/4/47/OUC-China_Index_Part6.png" />
+
<h3 data-pos="['10%', '8%']" data-duration="1000" data-effect="fadein">
-
                    <span>Policy&practise</span>
+
Fadein
-
                </p>
+
</h3>
-
            </li>
+
<div data-pos="['44%', '15%']" data-duration="700" data-effect="fadein">
-
        </ul>
+
Text
-
    </div>
+
</div>
-
    <div style="clear:both"></div>
+
<div data-pos="['66%', '11%']" data-duration="700" data-effect="fadein">
-
    <footer>
+
and Image
-
         <p style="padding-top:40px">Designed by WinUP Software</p>
+
</div>
-
        <p>Thanks to <a href="http://getbootstrap.com/">Bootstrap</a>, <a href="http://bootswatch.com/">Bootswatch</a> and <a href="http://glyphicons.com/">Glyphicons</a></p>
+
<div data-pos="['29%', '46%']" data-duration="700" data-delay="500" data-effect="fadein">
-
     </footer>
+
<img data-lazy-src="images/add.jpg"/>
-
    <script>
+
</div>
-
    $('#silder').unslider({
+
</div>
-
        speed: 500,
+
</div>
-
        delay: 3000,
+
<script type="text/javascript">
-
        keys: true,
+
$(document).ready(function(){
-
        dots: true,
+
$('.example-animation').DrSlider(); //Yes! that's it!
-
        fluid: false
+
});
-
    });
+
</script>
-
    </script>
+
<!-- 代码 结束 -->
-
    <img src="https://static.igem.org/mediawiki/2014/9/9a/OUC-China_Index_Anchor.png" class="anchor" onclick="document.documentElement.scrollTop = document.body.scrollTop = 0;" />
+
</div>
 +
<div class = "main">
 +
  <div class = "part1">
 +
    <div class = "waveUp"></div>
 +
    <div class = "waveDown"></div>
 +
    <img class = "objLeft" src="images/objLeft.png"/> <img class = "objRight" src="images/objRight.png"/> </div>
 +
  <div class = "part2"> <img class = "lFish" src="images/fishLeft.png"/> <img class = "rFish" src="images/fishRight.png"/>
 +
    <ul style="width:1350px; margin:auto; position:relative;">
 +
      <li style = "top:85px;left:145px;-webkit-animation-duration: 0.3s;"> <img src="images/1.png"/> <img id = "lGear" src="images/lGear.png" style="top:59px;left:131px;display:none;"/> <img src="images/bGear.png" style="top:75px;left:25px;"/>
 +
        <p style="top: 210px; left: 70px;">the double plasmid system</p>
 +
      </li>
 +
      <li style = "top:30px;left:520px;-webkit-animation-duration: 0.33s;"><img src="images/2.png"/> <img src="images/circle.png" style="top: 69px; left: 38px;"> <img id = "lGear2" src="images/lGear2.png" style="top: 34px; left: 179px;">
 +
        <p style="top: 275px; left: 86px;">Transfection</p>
 +
      </li>
 +
      <li style = "top:80px;left:930px;-webkit-animation-duration: 0.35s;"><img src="images/3.png"/> <img id = "express" src="images/expression.png" style="top: 201px; left: 88px;display:none;"> <img src="images/model.png" style="top: 42px; left: 79px;">
 +
        <p style="top: 246px; left: 67px;">modeling</p>
 +
      </li>
 +
      <li style = "top:450px;left:190px; -webkit-animation-duration: 0.18s;-webkit-animation-iteration-count: 10;"><img src="images/4.png"/> <img id = "peiYang" src="images/peiYang.png" style="top: 55px; left:80px;">
 +
        <p style="top: 232px; left: 59px;">Judging</p>
 +
      </li>
 +
      <li style = "top:414px;left:530px;-webkit-animation-duration: 0.37s;"><img src="images/5.png"/> <img id = "safety" src="images/blue.png" style="top: 97px; left: 92px;">
 +
         <p style="top: 267px; left: 74px;">safety</p>
 +
      </li>
 +
      <li style = "top:450px;left:920px; -webkit-animation-duration: 0.18s;-webkit-animation-iteration-count: 10;"><img src="images/6.png"/> <img id = "lamp" src="images/_lamp.png" style="top: 53px; left: 85px;">
 +
        <p style="top: 231px; left: 69px;">policy&practise </p>
 +
      </li>
 +
     </ul>
 +
  </div>
 +
  <script>
 +
    var  list = $(".part2 ul>li");
 +
$(window).scroll(function(){
 +
  if($(document).scrollTop() >= 900){
 +
for(var i = 0;i < list.length;i++){
 +
  list.eq(i).delay(i * 8).fadeIn(800).addClass("buble delay"+(i + 1));
 +
}
 +
  };
 +
});
 +
$("#lGear").parent().hover(function(){
 +
  $("#lGear").fadeIn(1000);
 +
},function(){
 +
  $("#lGear").fadeOut(1000,function(){
 +
    $("#lGear").clearQueue();
 +
  });
 +
});
 +
$("#lGear2").parent().hover(function(){
 +
  $("#lGear2").animate({left:'83px',top:'115px'},1000);
 +
},function(){
 +
  $("#lGear2").animate({left:'179px',top:'34px'},800,function(){
 +
    $(this).clearQueue();
 +
  });
 +
});
 +
$("#express").parent().hover(function(){
 +
      $("#express").fadeIn(1000);
 +
},function(){
 +
  $("#express").fadeOut(1000,function(){
 +
    $("#express").clearQueue();
 +
  });
 +
});
 +
$("#peiYang").parent().hover(function(){
 +
  document.getElementById("peiYang").src = "images/medal.png";
 +
  },function(){
 +
document.getElementById("peiYang").src = "images/peiYang.png";
 +
});
 +
$("#safety").parent().hover(function(){
 +
  document.getElementById("safety").src = "images/red.png";
 +
},function(){
 +
  document.getElementById("safety").src = "images/blue.png";
 +
});
 +
$("#lamp").parent().hover(function(){
 +
document.getElementById("lamp").src = "images/lamp.png";
 +
},function(){
 +
document.getElementById("lamp").src = "images/_lamp.png";
 +
});
 +
  </script>
 +
</div>
 +
<div class = "footer"> <img id = "top" src="images/toTop.png"/>
 +
  <script>
 +
$("#top").click(function(){
 +
  $(document).scrollTop(0);
 +
});
 +
</script>
 +
</div>
 +
</body>
</html>
</html>

Revision as of 04:51, 16 October 2014

<!doctype html> index

Moving

Text
and Image

Fadein

Text
and Image

  • the double plasmid system

  • Transfection

  • modeling

  • Judging

  • safety

  • policy&practise

Retrieved from "http://2014.igem.org/Team:OUC-China"