Difference between revisions of "Team:NUDT CHINA"

 
(159 intermediate revisions by the same user not shown)
Line 5: Line 5:
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
     <title>Team:NUDT_CHINA</title>
 
     <title>Team:NUDT_CHINA</title>
−
</head>
+
<script type="text/javascript" >
 +
window.onload=function(){
 +
var oContent = $('content');
 +
var oLoading = $('loading');
 +
var oList = $('Qidilist');
 +
var aLiList = getByClass( oList , 'liList' );
 +
var oMenu = $('lay-menu');
 +
  var oNextBtn=$('next-button');
 +
var aLiMenu = oMenu.getElementsByTagName('li');
 +
var iNow = 0;
 +
var prevIndex = 0;
 +
var iContentHeight = 0;
 +
var btn1 = $('btn1');
 +
var btn2 = $('btn2');
 +
var btn3 = $('btn3');
 +
var btn4 = $('btn4');
 +
contentAuto();
 +
mouseWheel();
 +
bindNav();
 +
add1();
 +
add2();
 +
window.onresize = fnResize; 
 +
function add1() {
 +
oNextBtn.onclick=function () {
 +
showLoading();
 +
};
 +
}
 +
function add2() {
 +
btn1.onclick=function () {
 +
toMove(1);
 +
iNow=1;
 +
}
 +
btn2.onclick=function () {
 +
toMove(2);
 +
iNow=2;
 +
}
 +
btn3.onclick=function () {
 +
toMove(3);
 +
iNow=3;
 +
}
 +
btn4.onclick=function () {
 +
toMove(0);
 +
iNow=0;
 +
}
 +
}
 +
function mouseWheel(){
 +
var bBtn = true;
 +
var timer = null;
 +
if(oContent.addEventListener){
 +
oContent.addEventListener('DOMMouseScroll',function(ev){
 +
var ev = ev || window.event;
 +
clearTimeout(timer);
 +
timer = setTimeout(function(){
 +
toChange(ev);
 +
},200);
 +
},false);
 +
}
 +
oContent.onmousewheel = function(ev){
 +
var ev = ev || window.event;
 +
clearTimeout(timer);
 +
timer = setTimeout(function(){
 +
toChange(ev);
 +
},200);
 +
};
 +
 +
function toChange(ev){
 +
if(ev.detail){
 +
bBtn = ev.detail > 0 ? true : false;
 +
}
 +
else{
 +
bBtn = ev.wheelDelta < 0 ? true : false;
 +
}
 +
 +
if(  iNow == aLiList.length-1){if(bBtn!=0){return;};}
 +
if( iNow == 0 ){if(bBtn==0){return;};}
 +
 +
prevIndex = iNow;
 +
if(bBtn){  //↓
 +
if(iNow != aLiList.length-1){
 +
iNow++;
 +
}
 +
toMove(iNow);
 +
}
 +
else{  //↑
 +
if(iNow != 0){
 +
iNow--;
 +
}
 +
toMove(iNow);
 +
}
 +
 +
if(ev.preventDefault){
 +
ev.preventDefault();
 +
}
 +
else{
 +
return false;
 +
}
 +
}
 +
 +
}
 +
function showLoading(){
 +
var oSpan = oLoading.getElementsByTagName('span')[0];
 +
var aDiv = oLoading.getElementsByTagName('div');
 +
oSpan.style.width = '100%';
 +
oSpan.addEventListener('webkitTransitionend',spanChange,false);
 +
oSpan.addEventListener('transitionend',spanChange,false);
 +
function spanChange(){
 +
if(oSpan.style.width == '100%'){
 +
oSpan.style.display = 'none';
 +
aDiv[0].style.height = 0;
 +
aDiv[1].style.height = 0;
 +
}
 +
}
 +
aDiv[0].addEventListener('webkitTransitionend',divChange,false);
 +
aDiv[0].addEventListener('transitionend',divChange,false);
 +
 +
function divChange(){
 +
oLoading.parentNode.removeChild(oLoading);
 +
}
 +
 +
}
  
−
      
+
function bindNav(){
 +
for(var i=0;i<aLiMenu.length;i++){
 +
aLiMenu[i].index = i;
 +
aLiMenu[i].onclick = function(){
 +
prevIndex = iNow;
 +
iNow = this.index;
 +
toMove( this.index );
 +
};
 +
}
 +
}
 +
function toMove(index){
 +
oList.style.top = - index * iContentHeight + 'px';
 +
for(var i=0;i<aLiMenu.length;i++){
 +
aLiMenu[i].className = '';
 +
}
 +
aLiMenu[index].className = 'active';
 +
}
 +
 +
function contentAuto(){
 +
iContentHeight = viewHeight() ;
 +
oContent.style.height = iContentHeight + 'px';
 +
for(var i=0;i<aLiList.length;i++){
 +
aLiList[i].style.height = iContentHeight + 'px';
 +
}
 +
oList.style.top = - iNow * iContentHeight + 'px';
 +
}
 +
 +
function fnResize(){
 +
contentAuto();
 +
}
 +
 +
function $(id){
 +
return document.getElementById(id);
 +
}
 +
 +
function viewWidth(){
 +
return window.innerWidth || document.documentElement.clientWidth;
 +
}
 +
 +
function viewHeight(){
 +
return window.innerHeight || document.documentElement.clientHeight;
 +
}
 +
 +
function getByClass(oParent,sClass){
 +
var aElem = oParent.getElementsByTagName('*');
 +
var arr = [];
 +
for(var i=0;i<aElem.length;i++){
 +
if( aElem[i].className == sClass ){
 +
arr.push( aElem[i] );
 +
}
 +
}
 +
return arr;
 +
}
 +
}
 +
</script>
 +
<style type="text/css">
 +
.button-next{    font-weight: bold;
 +
     font-family: "Lucida Console","Lucida Sans Typewriter",monaco,"Bitstream Vera Sans Mono",monospace;
 +
    position: absolute;
 +
    min-width: 180px;
 +
    min-height: 40px;
 +
  height: 7%;
 +
  width: 13%;
 +
  bottom: 1%;
 +
  background: #fff;
 +
  border: 1px solid #fff;
 +
  border-radius: 2px;
 +
  color: #222;
 +
  text-align: center;
 +
  cursor: pointer;
 +
  transition: .2s ease-in-out;
 +
  transform: translate(-50%, -50%);font-size: large;
 +
}
 +
.button-next:hover {
 +
  background: transparent;
 +
  color: #fff;
 +
}
 +
.myheader{height: 100%; text-align: center; background-color: rgba(255,255,255,0);margin:0 auto;position: relative;}
 +
.content{width:100%;}
 +
li{ list-style:none;}
 +
#Qidilist{ width:100%; position:absolute; top:0; left:0; transition:.5s top;}
 +
#lay-menu{ position:fixed; right:0; top:50%; z-index:20;}
 +
#lay-menu li{ width:10px; height:10px; border-radius:50%; margin:10px; border:1px black solid; cursor:pointer;}
 +
#lay-menu li.active{ background:black; cursor:default;}
 +
 
 +
.myheader img{width:100%; margin: 0;position: absolute;  top: 50%;transform: translate(0, -50%); left: 0;max-height: 80%;}
 +
.myheader h1{width:100%; margin: 0;position: absolute;  top: 40%;transform: translate(0, -50%); left: 0;max-height: 80%;font-size:78px; font-family:"Comic Sans MS",cursive;border-bottom: none;padding-bottom:40px;line-height:normal;}
 +
.myheader h3{width:100%; margin: 0;position: absolute;  top: 60%;transform: translate(0, -50%); left: 0;max-height: 80%;font-size:30px;border-bottom: none;font-weight:initial;font-family: "Big Caslon","Book Antiqua","Palatino Linotype",Georgia,serif;line-height:normal;}
 +
#loading div{ width:100%; height:50%; position:absolute; left:0; background:#009ee0; z-index:50; transition:1s;text-align: center;}
 +
#loading div:nth-of-type(1){ top:0;}
 +
#loading div:nth-of-type(2){ bottom:0;}
 +
#loading span{ width:0%; height:4px; background:white; position:absolute; left:0; top:50%; margin-top:-2px; z-index:60; transition:.10s;}
 +
body {
 +
    color: #777;
 +
}
 +
#Qidilist .liList{ width:100%; position:relative;  overflow:hidden;text-align: center;left:-30px;}
 +
.big-bg{position:absolute; top:0;left:0;height:100%;width:100%; z-index:9;}
 +
@media (min-width: 92em) {
 +
  .myheader {
 +
        width: 85%;}
 +
}
 +
@media (max-width: 92em) {
 +
  .myheader {
 +
        width: 85%;}
 +
}
 +
@media (max-width: 45em) {
 +
  .myheader {
 +
        width: 100%;}
 +
}
 +
 
 +
.next-button {z-index:10;position:absolute;font-weight: bold;
 +
    font-family: "Lucida Console","Lucida Sans Typewriter",monaco,"Bitstream Vera Sans Mono",monospace;
 +
  top: 40%;
 +
  left: 50%;font-size:29px;font-weight:10px;
 +
  z-index: 10;
 +
  padding: 1em 2.5em;
 +
  background: #fff;
 +
  border: 1px solid #fff;
 +
  border-radius: 4px;
 +
  color: #222;
 +
  font-size: large;
 +
  text-align: center;
 +
  cursor: pointer;
 +
  transition: .2s ease-in-out;
 +
  transform: translate(-50%, -50%);}
 +
.next-button:hover {
 +
  background: transparent;
 +
  color: #fff;
 +
}
 +
.under-bg{z-index: 0.5;opacity: 1; position: fixed; top: 0; left: 0; width: 100%; height: 100%;}
 +
</style>
 +
 
 +
</head>
 +
<img class="under-bg" src="https://static.igem.org/mediawiki/2017/c/cc/T-NUDT_CHINA-MainPage1.jpg" alt="">
 +
<div id="loading">
 +
    <div><img src="https://static.igem.org/mediawiki/2017/1/17/T-NUDT_CHINA-loadingBg3.jpg" alt="" class="big-bg"></div>
 +
        <div><img src="https://static.igem.org/mediawiki/2017/a/ab/T-NUDT_CHINA-loadingBg4.jpg" alt="" class="big-bg">
 +
            <a class="next-button" id="next-button">Get Started!</a>
 +
        </div>
 +
        <span></span>
 +
    </div>
 +
 
 
   <div id="layout">
 
   <div id="layout">
 
         <a href="#menu" id="menuLink" class="menu-link">
 
         <a href="#menu" id="menuLink" class="menu-link">
Line 15: Line 275:
 
         <div class="pure-menu"><img src="https://static.igem.org/mediawiki/2017/4/4f/T-NUDT_CHINA-icon01.png" width=240px height=190px alt="">
 
         <div class="pure-menu"><img src="https://static.igem.org/mediawiki/2017/4/4f/T-NUDT_CHINA-icon01.png" width=240px height=190px alt="">
 
           <ul class="pure-menu-list">
 
           <ul class="pure-menu-list">
−
             <li class="pure-menu-item"><a class="pure-menu-heading" href="https://2017.igem.org/Team:NUDT_CHINA" class="pure-menu-link">HOME</a></li>               
+
             <li class="pure-menu-item"><a class="pure-menu-heading" href="https://2017.igem.org/Team:NUDT_CHINA" class="pure-menu-link">HOME</a></li>               
 
            
 
            
 
             <li class="pure-menu-item pure-menu-has-children">
 
             <li class="pure-menu-item pure-menu-has-children">
Line 31: Line 291:
 
                 <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Experiments" class="pure-menu-link">Experiment</a></li>
 
                 <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Experiments" class="pure-menu-link">Experiment</a></li>
 
                 <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Notebook" class="pure-menu-link">Notebook</a></li>
 
                 <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Notebook" class="pure-menu-link">Notebook</a></li>
−
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/InterLab" class="pure-menu-link">InterLab</a></li>
 
−
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Contribution" class="pure-menu-link">Contribution</a></li>
 
−
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Model" class="pure-menu-link">Model</a></li>
 
 
                 <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Results" class="pure-menu-link">Results</a></li>
 
                 <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Results" class="pure-menu-link">Results</a></li>
 
                 <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Demonstrate" class="pure-menu-link">Demonstrate</a></li>
 
                 <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Demonstrate" class="pure-menu-link">Demonstrate</a></li>
 
                 <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Improve" class="pure-menu-link">Improve</a></li>
 
                 <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Improve" class="pure-menu-link">Improve</a></li>
−
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Attributions" class="pure-menu-link">Attributions</a></li>
 
 
             </ul>
 
             </ul>
 
             </li>
 
             </li>
Line 49: Line 305:
 
             </ul>
 
             </ul>
 
             </li>
 
             </li>
 +
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Attributions" class="pure-menu-link">Attributions</a></li>
 +
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/InterLab" class="pure-menu-link">InterLab</a></li>
 +
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Model" class="pure-menu-link">Model</a></li>
 
                 <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Safety" class="pure-menu-link">SAFETY</a></li>
 
                 <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Safety" class="pure-menu-link">SAFETY</a></li>
 
             <li class="pure-menu-item pure-menu-has-children">
 
             <li class="pure-menu-item pure-menu-has-children">
 
               <a  class="pure-menu-link"onclick="Show('HP_show')">HP</a>
 
               <a  class="pure-menu-link"onclick="Show('HP_show')">HP</a>
 
               <ul class="pure-menu-children" id="HP_show">
 
               <ul class="pure-menu-children" id="HP_show">
−
                 <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/HP/Silver" class="pure-menu-link">Sliver HP</a></li>
+
                 <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/HP/Silver" class="pure-menu-link">Silver HP</a></li>
−
                 <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/HP/Gold_Integrated" class="pure-menu-link">Integrated and Gold</a></li>
+
                 <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/HP/Gold_Integrated" class="pure-menu-link">Integrated & Gold</a></li>
 
                 <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Engagement" class="pure-menu-link">Public Engagement</a></li>
 
                 <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Engagement" class="pure-menu-link">Public Engagement</a></li>
 
             </ul>
 
             </ul>
 
             </li>
 
             </li>
−
            <li class="pure-menu-item pure-menu-has-children">
 
−
              <a  class="pure-menu-link"onclick="Show('award_show')">AWARDS</a>
 
−
              <ul class="pure-menu-children" id="award_show">
 
−
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Applied_Design" class="pure-menu-link">Applied Design</a></li>
 
−
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Entrepreneurship" class="pure-menu-link">Enterpreneurship</a></li>
 
−
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Hardware" class="pure-menu-link">Hardware</a></li>
 
−
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Measurement" class="pure-menu-link">Measurement</a></li>
 
−
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Model" class="pure-menu-link">Model</a></li>
 
−
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Plant" class="pure-menu-link">Plant</a></li>
 
−
                <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Software" class="pure-menu-link">Software</a></li>
 
−
            </ul>
 
−
            </li>
 
−
               
 
 
             </ul>
 
             </ul>
 
         </div>   
 
         </div>   
 
         </div>
 
         </div>
−
 
+
        <div id="content" class="content">
−
      
+
     <ul id="lay-menu">
−
 
+
        <li class="active"></li>
−
 
+
            <li></li>
 +
            <li></li>
 +
            <li></li>
 +
        </ul>
 +
    <ul id="Qidilist">
 +
      <li id="abstract" class="liList">
 +
            <div class="myheader"id="main"><h1>MiRNA &nbsp;&nbsp;Locker</h1><h3>A Modularized DNA Assembly As miRNA Inhibitors</h3><button id="btn1" class="button-next">How it works?</button></div>
 +
            </li>
 +
      <li id="abstract" class="liList">
 +
            <div class="myheader"id="main"><img class="strory-telling1" src="https://static.igem.org/mediawiki/2017/a/ad/T-NUDT_CHINA-story1.png" no-repeat; ><button id="btn2" class="button-next">Next</button></div>
 +
            </li>
 +
      <li id="abstract" class="liList">
 +
            <div class="myheader"id="main"><img class="strory-telling2" src="https://static.igem.org/mediawiki/2017/3/35/T-NUDT_CHINA-story2.png" no-repeat; ><button id="btn3" class="button-next">Next</button></div>
 +
            </li>
 +
      <li id="abstract" class="liList">
 +
            <div class="myheader"id="main"><img class="strory-telling3" src="https://static.igem.org/mediawiki/2017/1/1e/T-NUDT_CHINA-story3.png" no-repeat; ><button id="btn4" class="button-next">Back</button></div>
 +
            </li>
 +
   
 +
        </ul>
 +
        </div>
 +
       
 +
</div>
 
<script type="text/javascript">
 
<script type="text/javascript">
−
(function (window, document) {
+
( function(window,document){
  
 
     var layout  = document.getElementById('layout'),
 
     var layout  = document.getElementById('layout'),
 
         menu    = document.getElementById('menu'),
 
         menu    = document.getElementById('menu'),
 
         menuLink = document.getElementById('menuLink'),
 
         menuLink = document.getElementById('menuLink'),
−
         content  = document.getElementById('content');
+
         content  = document.getElementById('main');
−
   
+
  
 
     function toggleClass(element, className) {
 
     function toggleClass(element, className) {
Line 118: Line 384:
 
         toggleAll(e);
 
         toggleAll(e);
 
     };
 
     };
 +
 
     content.onclick = function(e) {
 
     content.onclick = function(e) {
 
         if (menu.className.indexOf('active') !== -1) {
 
         if (menu.className.indexOf('active') !== -1) {
Line 123: Line 390:
 
         }
 
         }
 
     };
 
     };
−
 
−
 
  
 
}(this, this.document));
 
}(this, this.document));
Line 139: Line 404:
 
     }
 
     }
 
     }
 
     }
−
</script></div></body>
+
</script>
 +
</body>
 +
</html>

Latest revision as of 02:17, 2 November 2017

HOME
TEAM
PROJECT
Description
Design
Experiments
Notebook
InterLab
Contribution
Model
Results
Demonstrate
Improve
Attributions
PARTS
Parts
Basic Parts
Composite Parts
Part Collection
SAFETY
HUMAN PRACTICES
Silver HP
Integrated and Gold
Public Engagement
AWARDS
Applied Design
Entrepreneurship
Hardware
Measurement
Model
Plant
Software
JUDGING FORM
Team:NUDT_CHINA