Difference between revisions of "Team:NUDT CHINA"
| (92 intermediate revisions by the same user not shown) | |||
| Line 11: | 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 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(); | |
bindNav(); | bindNav(); | ||
| − | |||
add1(); | add1(); | ||
add2(); | add2(); | ||
| Line 39: | Line 33: | ||
} | } | ||
function add2() { | function add2() { | ||
| − | + | btn1.onclick=function () { | |
toMove(1); | toMove(1); | ||
| − | } | + | iNow=1; |
| − | + | } | |
| + | btn2.onclick=function () { | ||
toMove(2); | toMove(2); | ||
| − | } | + | iNow=2; |
| − | + | } | |
| + | btn3.onclick=function () { | ||
toMove(3); | toMove(3); | ||
| − | + | iNow=3; | |
| − | + | } | |
| − | + | btn4.onclick=function () { | |
| − | } | + | |
| − | + | ||
toMove(0); | 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(){ | function showLoading(){ | ||
| Line 93: | Line 142: | ||
} | } | ||
aLiMenu[index].className = 'active'; | aLiMenu[index].className = 'active'; | ||
| − | |||
| − | |||
| − | |||
} | } | ||
| Line 105: | Line 151: | ||
} | } | ||
oList.style.top = - iNow * iContentHeight + 'px'; | oList.style.top = - iNow * iContentHeight + 'px'; | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
} | } | ||
function fnResize(){ | function fnResize(){ | ||
contentAuto(); | contentAuto(); | ||
| − | |||
} | } | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
function $(id){ | function $(id){ | ||
return document.getElementById(id); | return document.getElementById(id); | ||
| Line 218: | 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%;} | .content{width:100%;} | ||
li{ list-style:none;} | li{ list-style:none;} | ||
| Line 224: | Line 210: | ||
#lay-menu li{ width:10px; height:10px; border-radius:50%; margin:10px; border:1px black solid; cursor:pointer;} | #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;} | #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;text-align: center;} | ||
#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;} | #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) { | @media (min-width: 92em) { | ||
| − | .myheader | + | .myheader { |
| − | + | width: 85%;} | |
} | } | ||
@media (max-width: 92em) { | @media (max-width: 92em) { | ||
| − | + | .myheader { | |
| − | .myheader | + | width: 85%;} |
| − | + | ||
} | } | ||
| − | @media (max-width: | + | @media (max-width: 45em) { |
| − | + | .myheader { | |
| − | .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; | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | z-index:10 | + | |
| − | + | ||
| − | padding: . | + | |
| − | background: | + | |
| − | + | ||
| − | border: 1px solid # | + | |
border-radius: 4px; | border-radius: 4px; | ||
| − | color: # | + | color: #222; |
| − | + | font-size: large; | |
text-align: center; | text-align: center; | ||
| − | + | cursor: pointer; | |
| − | transition: . | + | transition: .2s ease-in-out; |
| − | + | transform: translate(-50%, -50%);} | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | } | + | |
.next-button:hover { | .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> | </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 id="loading"> | ||
| − | <div></div> | + | <div><img src="https://static.igem.org/mediawiki/2017/1/17/T-NUDT_CHINA-loadingBg3.jpg" alt="" class="big-bg"></div> |
| − | <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> | <a class="next-button" id="next-button">Get Started!</a> | ||
</div> | </div> | ||
| Line 416: | 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 432: | 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/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> | ||
| − | |||
</ul> | </ul> | ||
</li> | </li> | ||
| Line 450: | 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"> | + | <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 | + | <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> | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
</ul> | </ul> | ||
</div> | </div> | ||
| Line 478: | Line 323: | ||
<ul id="lay-menu"> | <ul id="lay-menu"> | ||
<li class="active"></li> | <li class="active"></li> | ||
| − | |||
<li></li> | <li></li> | ||
<li></li> | <li></li> | ||
| Line 484: | 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> | ||
<li id="abstract" class="liList"> | <li id="abstract" class="liList"> | ||
| − | <div class=" | + | <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> | ||
<li id="abstract" class="liList"> | <li id="abstract" class="liList"> | ||
| − | <div class=" | + | <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"> | <li id="abstract" class="liList"> | ||
| − | <div class=" | + | <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> | ||
Latest revision as of 02:17, 2 November 2017
