Team:OUC-China/Team Instructor
From 2014.igem.org
(Difference between revisions)
Line 1: | Line 1: | ||
{{CSS/Main}} | {{CSS/Main}} | ||
<html> | <html> | ||
- | < | + | <meta charset="utf-8"> |
- | + | <title>index</title> | |
- | + | <script src="https://2014.igem.org/Team:OUC-China/js/jquery.js?action=raw&ctype=text/javascript"></script> | |
- | + | <script type="text/javascript" src="https://2014.igem.org/Team:OUC-China/js/jquery.devrama.slider.js?action=raw&ctype=text/javascript"></script> | |
- | + | <style type="text/css"> | |
- | + | @charset "utf-8"; | |
- | + | /* CSS Document */ | |
- | + | body, div, p, ul, li, h1, h2, h3, h4, h5, h6 { | |
- | + | margin: 0px; | |
- | + | padding: 0px; | |
- | + | font-family: "微软雅黑"; | |
- | + | } | |
- | + | body{ | |
- | + | min-width:1350px; | |
- | + | } | |
- | + | ul, ol { | |
- | + | list-style: none; | |
- | + | } | |
- | + | img { | |
- | + | display: block; | |
- | + | position: absolute; | |
- | + | } | |
- | + | a { | |
- | + | color: inherit; | |
- | + | text-decoration: none; | |
- | + | } | |
- | + | @charset "utf-8"; | |
- | + | /* CSS Document */ | |
- | + | @keyframes bubleM { | |
- | + | 0% { | |
- | + | margin-top:0px; | |
- | + | margin-left:0px; | |
- | + | } | |
- | + | 25% { | |
- | + | margin-top:3px; | |
- | + | margin-left:3px; | |
- | + | } | |
- | + | 50% { | |
- | + | margin-top:6px; | |
- | + | margin-left:0px; | |
- | + | } | |
- | + | 75% { | |
- | + | margin-top:3px; | |
- | + | margin-left:-3px; | |
- | + | } | |
- | + | 100% { | |
- | + | margin-top:0px; | |
- | + | margin-left:0px; | |
- | + | } | |
- | + | } | |
- | + | @-webkit-keyframes bubleM { | |
- | + | 0% { | |
- | + | margin-top:0px; | |
- | + | margin-left:0px; | |
- | + | } | |
- | + | 25% { | |
- | + | margin-top:3px; | |
- | + | margin-left:3px; | |
- | + | } | |
- | + | 50% { | |
- | + | margin-top:6px; | |
- | + | margin-left:0px; | |
- | + | } | |
- | + | 75% { | |
- | + | margin-top:3px; | |
- | + | margin-left:-3px; | |
- | + | } | |
- | + | 100% { | |
- | + | margin-top:0px; | |
- | + | margin-left:0px; | |
- | + | } | |
- | + | } | |
- | + | .header { | |
- | + | width: 1200px; | |
- | + | height: 50px; | |
- | + | margin: 0 auto; | |
- | + | position: relative; | |
- | + | } | |
- | + | .header .igemLogo { | |
- | + | transition: 0.5s; | |
- | + | -moz-transition: 0.5s; | |
- | + | -o-transition: 0.5s; | |
- | + | -webkit-transition: 0.5s; | |
- | + | } | |
- | + | .header .igemLogo:hover { | |
- | + | transform: rotate(360deg); | |
- | + | -webkit-transform: rotate(360deg); | |
- | + | -moz-transform: rotate(360deg); | |
- | + | -o-transform: rotate(360deg); | |
- | + | -ms-transform: rotate(360deg); | |
- | + | } | |
+ | |||
+ | .header .nav{ | ||
+ | top: 10px; | ||
+ | left: 450px; | ||
+ | } | ||
+ | .header .Logo { | ||
+ | width: 70px; | ||
+ | height: 70px; | ||
+ | background: url(https://static.igem.org/mediawiki/2014/f/fa/OUC-China_14Logo.png); | ||
+ | position: absolute; | ||
+ | right: 0; | ||
+ | bottom: -10px; | ||
+ | } | ||
+ | .header .Logo ul { | ||
+ | position: absolute; | ||
+ | width: 250px; | ||
+ | height: 150px; | ||
+ | display: none; | ||
+ | right: 0px; | ||
+ | top: 70px; | ||
+ | } | ||
+ | .header .Logo li { | ||
+ | height: 50px; | ||
+ | width: 215px; | ||
+ | line-height: 50px; | ||
+ | font-size: 14px; | ||
+ | background: #fff; | ||
+ | margin: 10px 0 20px 0; | ||
+ | position: relative; | ||
+ | border-bottom-left-radius: 6px; | ||
+ | border-top-left-radius: 6px; | ||
+ | } | ||
+ | .header .Logo li a { | ||
+ | margin-left: 5px; | ||
+ | } | ||
+ | .header .Logo li img { | ||
+ | position: absolute; | ||
+ | right: -35px; | ||
+ | top: -10px; | ||
+ | } | ||
+ | .neck { | ||
+ | height: 512px; | ||
+ | width: 100%; | ||
+ | background: rgb(76,145,190); | ||
+ | } | ||
+ | .main { | ||
+ | } | ||
+ | .main .part1 { | ||
+ | height: 480px; | ||
+ | width: 100%; | ||
+ | background: rgb(210,233,253); | ||
+ | position: relative; | ||
+ | } | ||
+ | .main .part1 .waveUp { | ||
+ | width: 100%; | ||
+ | height: 130px; | ||
+ | background: url(https://static.igem.org/mediawiki/2014/f/f0/WaveUp.png); | ||
+ | position: absolute; | ||
+ | bottom: 0; | ||
+ | z-index: 0 | ||
+ | } | ||
+ | .main .part1 .waveDown { | ||
+ | width: 100%; | ||
+ | height: 130px; | ||
+ | background: url(https://static.igem.org/mediawiki/2014/6/63/WaveDown.png); | ||
+ | position: absolute; | ||
+ | bottom: 0; | ||
+ | z-index: 3; | ||
+ | } | ||
+ | .main .part1 img { | ||
+ | bottom: 60px; | ||
+ | transition: 0.3s; | ||
+ | -moz-transition: 0.3s; | ||
+ | -o-transition: 0.3s; | ||
+ | -webkit-transition: 0.3s; | ||
+ | } | ||
+ | .main .part1 img:hover { | ||
+ | bottom: 80px; | ||
+ | } | ||
+ | .main .part1 .objLeft { | ||
+ | left: 200px; | ||
+ | } | ||
+ | .main .part1 .objRight { | ||
+ | right: 200px; | ||
+ | } | ||
+ | .main .part2 { | ||
+ | width: 100%; | ||
+ | height: 905px; | ||
+ | background: rgb(96,159,210); | ||
+ | position: relative; | ||
+ | } | ||
+ | .main .part2 ul li { | ||
+ | position: absolute; | ||
+ | display:none; | ||
+ | } | ||
+ | .main .part2 ul li p{ | ||
+ | display: block; | ||
+ | position: absolute; | ||
+ | width: 184px; | ||
+ | color: rgb(49,129,194); | ||
+ | text-align: center; | ||
+ | font-size:24px; | ||
+ | } | ||
+ | .main .part2 .buble { | ||
+ | animation-name: bubleM; | ||
+ | animation-duration:1s; | ||
+ | animation-timing-function: linear; | ||
+ | animation-iteration-count: 10; | ||
+ | animation-direction: alternate; | ||
+ | animation-fill-mode: both; | ||
+ | animation-play-state: running; | ||
+ | -webkit-animation-name: bubleM; | ||
+ | -webkit-animation-duration: 0.3s; | ||
+ | -webkit-animation-timing-function: linear; | ||
+ | -webkit-animation-iteration-count: 7; | ||
+ | -webkit-animation-direction: alternate; | ||
+ | -webkit-animation-fill-mode: both; | ||
+ | -webkit-animation-play-state: running; | ||
+ | } | ||
+ | .delay1 { | ||
+ | -moz-animation-delay: 0s; | ||
+ | } | ||
+ | .delay2 { | ||
+ | -moz-animation-delay: 0.4s; | ||
+ | } | ||
+ | .delay3 { | ||
+ | -moz-animation-delay: 0.8s; | ||
+ | } | ||
+ | .delay4 { | ||
+ | -moz-animation-delay: 1.2s; | ||
+ | } | ||
+ | .delay5 { | ||
+ | -moz-animation-delay: 1.6s; | ||
+ | } | ||
+ | .delay6 { | ||
+ | -moz-animation-delay: 2s; | ||
+ | } | ||
+ | .main .part2 .lFish { | ||
+ | left: 45px; | ||
+ | bottom: -95px; | ||
+ | } | ||
+ | .main .part2 .rFish { | ||
+ | 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(https://static.igem.org/mediawiki/2014/2/20/OUC-China_Index_Slide1.png)} | ||
+ | .example-animation { | ||
+ | color: #FFF; | ||
+ | font-size: 60px; | ||
+ | } | ||
+ | </style> | ||
+ | </head> | ||
+ | <body> | ||
+ | <div class = "header"> <img src="https://static.igem.org/mediawiki/2014/a/a1/OUC_China_Content_Title.png" style="width:340px;height:110px;"/> <img class = "igemLogo" src="https://static.igem.org/mediawiki/2014/c/c6/OUC-China_Content_IGEM.png" style="left:360px"/> | ||
+ | <div class = "nav"> | ||
+ | <ul> | ||
+ | <li>HOME</li> | ||
+ | <li class = "pMenu">TEAM | ||
+ | <ul> | ||
+ | <li><a href="page.html">team members</a></li> | ||
+ | <li><a href="#">instructor</a></li> | ||
+ | <li><a href="#">Acknowledgement</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li>PROJECT</li> | ||
+ | <li>JUDING</li> | ||
+ | <li>SAFETY</li> | ||
+ | <li>NOTEBOOK</li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | <div class = "Logo pMenu"> | ||
+ | <ul> | ||
+ | <li><a href="#">2013:</a><img src="https://static.igem.org/mediawiki/2014/d/d0/13logo.png"></li> | ||
+ | <li><a href="#">2012:</a><img src="https://static.igem.org/mediawiki/2014/d/d8/OUC-China_12Logo.png"></li> | ||
+ | </ul> | ||
+ | </div> | ||
<script> | <script> | ||
- | + | // JavaScript Document | |
- | + | $(".pMenu").mouseover(function(){ | |
- | + | $(this).find("ul").slideDown(); | |
- | + | }); | |
- | + | $(".pMenu").mouseleave(function(){ | |
- | <div class=" | + | $(this).find("ul").slideUp(function(){ |
- | + | $(this).clearQueue(); | |
- | + | }); | |
- | + | }); | |
- | + | </script> | |
- | + | </div> | |
- | + | <!--轮播效果--> | |
- | + | <div class = "neck"> | |
- | + | <!-- 代码 开始 --> | |
- | + | <div class="example-animation"> | |
- | + | <div data-lazy-background="https://static.igem.org/mediawiki/2014/4/45/OUC-China_1.png"> | |
- | + | <h3 data-pos="['0%', '110%', '10%', '5%']" data-duration="700" data-effect="move" > | |
- | + | Moving | |
- | + | </h3> | |
- | + | <div data-pos="['-30%', '25%', '40%', '25%']" data-duration="700" data-effect="move"> | |
- | + | Text | |
- | + | </div> | |
- | + | <div data-pos="['56%', '-40%', '56%', '11%']" data-duration="700" data-effect="move"> | |
- | + | and Image | |
- | + | </div> | |
- | + | <div data-pos="['23%', '110%', '23%', '42%']" data-duration="700" data-effect="move"> | |
- | + | <img data-lazy-src="images/add.jpg"/> | |
- | + | </div> | |
- | + | </div> | |
- | + | <div data-lazy-background="images/2.jpg"> | |
- | + | <h3 data-pos="['10%', '8%']" data-duration="1000" data-effect="fadein"> | |
- | + | Fadein | |
- | + | </h3> | |
- | + | <div data-pos="['44%', '15%']" data-duration="700" data-effect="fadein"> | |
- | + | Text | |
- | + | </div> | |
- | + | <div data-pos="['66%', '11%']" data-duration="700" data-effect="fadein"> | |
- | + | and Image | |
- | + | </div> | |
- | + | <div data-pos="['29%', '46%']" data-duration="700" data-delay="500" data-effect="fadein"> | |
- | + | <img data-lazy-src="images/add.jpg"/> | |
- | + | </div> | |
- | + | </div> | |
- | + | </div> | |
- | + | <script type="text/javascript"> | |
- | + | $(document).ready(function(){ | |
- | + | $('.example-animation').DrSlider(); //Yes! that's it! | |
- | + | }); | |
- | + | </script> | |
- | + | <!-- 代码 结束 --> | |
- | + | </div> | |
- | + | <div class = "main"> | |
- | + | <div class = "part1"> | |
- | + | <div class = "waveUp"></div> | |
- | + | <div class = "waveDown"></div> | |
- | + | <img class = "objLeft" src="https://static.igem.org/mediawiki/2014/4/41/OUC-China_Index_Plasmid1.png"/> <img class = "objRight" src="https://static.igem.org/mediawiki/2014/e/e6/OUC-China_Index_Plasmid2.png"/> </div> | |
- | + | <div class = "part2"> <img class = "lFish" src="https://static.igem.org/mediawiki/2014/a/a0/OUC-China_FishLeft.png"/> <img class = "rFish" src="https://static.igem.org/mediawiki/2014/d/de/OUC-China_FishRight.png"/> | |
- | + | <ul style="width:1350px; margin:auto; position:relative;"> | |
- | + | <li style = "top:85px;left:145px;-webkit-animation-duration: 0.3s;"> <img src="https://static.igem.org/mediawiki/2014/4/45/OUC-China_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> | ||
</html> | </html> |
Revision as of 11:15, 16 October 2014
Moving
Text
and Image
Fadein
Text
and Image
-
the double plasmid system
-
Transfection
-
modeling
-
Judging
-
safety
-
policy&practise