Difference between revisions of "Team:NUDT CHINA"
| (208 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
| − | |||
{{NUDT_CHINA}} | {{NUDT_CHINA}} | ||
<html lang="en"> | <html lang="en"> | ||
| Line 6: | 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> | ||
| − | |||
<script type="text/javascript" > | <script type="text/javascript" > | ||
window.onload=function(){ | window.onload=function(){ | ||
| Line 13: | Line 11: | ||
var oList = $('Qidilist'); | var oList = $('Qidilist'); | ||
var aLiList = getByClass( oList , 'liList' ); | var aLiList = getByClass( oList , 'liList' ); | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
var oMenu = $('lay-menu'); | var oMenu = $('lay-menu'); | ||
| + | var oNextBtn=$('next-button'); | ||
var aLiMenu = oMenu.getElementsByTagName('li'); | var aLiMenu = oMenu.getElementsByTagName('li'); | ||
| − | |||
var iNow = 0; | var iNow = 0; | ||
var prevIndex = 0; | var prevIndex = 0; | ||
var iContentHeight = 0; | var iContentHeight = 0; | ||
| − | + | var btn1 = $('btn1'); | |
| + | var btn2 = $('btn2'); | ||
| + | var btn3 = $('btn3'); | ||
| + | var btn4 = $('btn4'); | ||
contentAuto(); | contentAuto(); | ||
| − | |||
| − | |||
mouseWheel(); | mouseWheel(); | ||
| − | + | bindNav(); | |
| + | add1(); | ||
| + | add2(); | ||
window.onresize = fnResize; | window.onresize = fnResize; | ||
| − | + | function add1() { | |
| − | function | + | oNextBtn.onclick=function () { |
| − | + | showLoading(); | |
| − | + | }; | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | } | + | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
} | } | ||
| − | + | function add2() { | |
| − | function | + | 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(){ | function mouseWheel(){ | ||
var bBtn = true; | var bBtn = true; | ||
| Line 151: | Line 104: | ||
} | } | ||
| − | + | function showLoading(){ | |
| − | function | + | var oSpan = oLoading.getElementsByTagName('span')[0]; |
| − | var | + | var aDiv = oLoading.getElementsByTagName('div'); |
| − | var | + | 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; | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | function | + | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
} | } | ||
| − | + | } | |
| + | aDiv[0].addEventListener('webkitTransitionend',divChange,false); | ||
| + | aDiv[0].addEventListener('transitionend',divChange,false); | ||
| + | |||
| + | function divChange(){ | ||
| + | oLoading.parentNode.removeChild(oLoading); | ||
} | } | ||
| − | for(var i=0;i< | + | } |
| − | + | ||
| − | + | 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){ | function $(id){ | ||
return document.getElementById(id); | return document.getElementById(id); | ||
| Line 250: | Line 182: | ||
</script> | </script> | ||
<style type="text/css"> | <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;} | #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{ position:fixed; right:0; top:50%; z-index:20;} | ||
| − | #lay-menu li{ width:10px; height:10px; border-radius:50%; margin:10px; border:1px | + | #lay-menu li{ width:10px; height:10px; border-radius:50%; margin:10px; border:1px black solid; cursor:pointer;} |
| − | #lay-menu li.active{ background: | + | #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{ width:100%; height:50%; position:absolute; left:0; background:#009ee0; z-index:50; transition:1s;} | + | |
#loading div:nth-of-type(1){ top:0;} | #loading div:nth-of-type(1){ top:0;} | ||
#loading div:nth-of-type(2){ bottom: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;} | #loading span{ width:0%; height:4px; background:white; position:absolute; left:0; top:50%; margin-top:-2px; z-index:60; transition:.10s;} | ||
| − | |||
body { | body { | ||
color: #777; | color: #777; | ||
} | } | ||
| − | + | #Qidilist .liList{ width:100%; position:relative; overflow:hidden;text-align: center;left:-30px;} | |
| − | @media (min-width: | + | .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> | </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></div> | + | <div><img src="https://static.igem.org/mediawiki/2017/a/ab/T-NUDT_CHINA-loadingBg4.jpg" alt="" class="big-bg"> |
| − | <div> | + | <a class="next-button" id="next-button">Get Started!</a> |
</div> | </div> | ||
<span></span> | <span></span> | ||
</div> | </div> | ||
| + | |||
<div id="layout"> | <div id="layout"> | ||
<a href="#menu" id="menuLink" class="menu-link"> | <a href="#menu" id="menuLink" class="menu-link"> | ||
| Line 362: | Line 273: | ||
</a> | </a> | ||
<div id="menu"> | <div id="menu"> | ||
| − | <div class="pure-menu"><img src=" | + | <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=" | + | <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"> | ||
| − | <a | + | <a class="pure-menu-link"onclick="Show('team_show')">TEAM</a> |
<ul class="pure-menu-children" id="team_show"> | <ul class="pure-menu-children" id="team_show"> | ||
| − | <li class="pure-menu-item"><a href=" | + | <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Team" class="pure-menu-link">Team</a></li> |
| − | <li class="pure-menu-item"><a href=" | + | <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Collaborations" class="pure-menu-link">Collaborations</a></li> |
</ul> | </ul> | ||
</li> | </li> | ||
<li class="pure-menu-item pure-menu-has-children"> | <li class="pure-menu-item pure-menu-has-children"> | ||
| − | <a | + | <a class="pure-menu-link"onclick="Show('project_show')">PROJECT</a> |
<ul class="pure-menu-children" id="project_show"> | <ul class="pure-menu-children" id="project_show"> | ||
| − | <li class="pure-menu-item"><a href=" | + | <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Description" class="pure-menu-link">Description</a></li> |
| − | <li class="pure-menu-item"><a href=" | + | <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Design" class="pure-menu-link">Design</a></li> |
| − | <li class="pure-menu-item"><a href=" | + | <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=" | + | <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=" | + | <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/Improve" class="pure-menu-link">Improve</a></li> | |
| − | <li class="pure-menu-item"><a href=" | + | |
| − | + | ||
| − | <li class="pure-menu-item"><a href=" | + | |
| − | + | ||
</ul> | </ul> | ||
</li> | </li> | ||
<li class="pure-menu-item pure-menu-has-children"> | <li class="pure-menu-item pure-menu-has-children"> | ||
| − | <a | + | <a class="pure-menu-link"onclick="Show('part_show')">PARTS</a> |
<ul class="pure-menu-children" id="part_show"> | <ul class="pure-menu-children" id="part_show"> | ||
| − | <li class="pure-menu-item"><a href=" | + | <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Parts" class="pure-menu-link">Parts</a></li> |
| − | <li class="pure-menu-item"><a href=" | + | <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Basic_Part" class="pure-menu-link">Basic Parts</a></li> |
| − | <li class="pure-menu-item"><a href=" | + | <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Composite_Part" class="pure-menu-link">Composite Parts</a></li> |
| − | <li class="pure-menu-item"><a href=" | + | <li class="pure-menu-item"><a href="https://2017.igem.org/Team:NUDT_CHINA/Part_Collection" class="pure-menu-link">Part Collection</a></li> |
</ul> | </ul> | ||
</li> | </li> | ||
| − | <li class="pure-menu-item"><a href=" | + | <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 pure-menu-has-children"> | <li class="pure-menu-item pure-menu-has-children"> | ||
| − | <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=" | + | <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=" | + | <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=" | + | <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> | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
</ul> | </ul> | ||
</div> | </div> | ||
</div> | </div> | ||
| − | + | <div id="content" class="content"> | |
| − | + | ||
| − | + | ||
| − | <div id="content"class="content"> | + | |
<ul id="lay-menu"> | <ul id="lay-menu"> | ||
<li class="active"></li> | <li class="active"></li> | ||
| Line 435: | Line 328: | ||
</ul> | </ul> | ||
<ul id="Qidilist"> | <ul id="Qidilist"> | ||
| − | + | <li id="abstract" class="liList"> | |
| − | + | <div class="myheader"id="main"><h1>MiRNA 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> | ||
| − | + | <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> | </li> | ||
| − | + | ||
</ul> | </ul> | ||
</div> | </div> | ||
</div> | </div> | ||
| − | <script> | + | <script type="text/javascript"> |
( function(window,document){ | ( function(window,document){ | ||
| Line 505: | Line 394: | ||
</script> | </script> | ||
| − | <script> | + | <script type="text/javascript" > |
function Show(tagId) { | function Show(tagId) { | ||
if (document.getElementById(tagId).style.display=="none") { | if (document.getElementById(tagId).style.display=="none") { | ||
Latest revision as of 02:17, 2 November 2017
