(61 intermediate revisions by the same user not shown) | |||
Line 17: | Line 17: | ||
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(); | bindNav(); | ||
add1(); | add1(); | ||
+ | add2(); | ||
window.onresize = fnResize; | window.onresize = fnResize; | ||
function add1() { | function add1() { | ||
Line 26: | Line 31: | ||
showLoading(); | 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(){ | function mouseWheel(){ | ||
Line 159: | Line 182: | ||
</script> | </script> | ||
<style type="text/css"> | <style type="text/css"> | ||
− | .myheader{height: 100%; text-align: center; background-color: rgba(255,255,255,0 | + | .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 166: | 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%; | + | |
+ | .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;} | .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: | + | width: 85%;} |
} | } | ||
@media (max-width: 92em) { | @media (max-width: 92em) { | ||
.myheader { | .myheader { | ||
− | width: | + | width: 85%;} |
} | } | ||
@media (max-width: 45em) { | @media (max-width: 45em) { | ||
.myheader { | .myheader { | ||
− | width: | + | width: 100%;} |
} | } | ||
− | .next-button {z-index:10;position:absolute; | + | .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%; | top: 40%; | ||
− | left: 50%; | + | left: 50%;font-size:29px;font-weight:10px; |
z-index: 10; | z-index: 10; | ||
padding: 1em 2.5em; | padding: 1em 2.5em; | ||
Line 200: | Line 246: | ||
border-radius: 4px; | border-radius: 4px; | ||
color: #222; | color: #222; | ||
− | font-size: | + | font-size: large; |
text-align: center; | text-align: center; | ||
cursor: pointer; | cursor: pointer; | ||
Line 209: | Line 255: | ||
color: #fff; | color: #fff; | ||
} | } | ||
− | .under-bg{z-index: 0.5;opacity: | + | .under-bg{z-index: 0.5;opacity: 1; position: fixed; top: 0; left: 0; width: 100%; height: 100%;} |
</style> | </style> | ||
Line 229: | 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 245: | 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 263: | 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 291: | 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 298: | Line 329: | ||
<ul id="Qidilist"> | <ul id="Qidilist"> | ||
<li id="abstract" class="liList"> | <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; ></div> | + | <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> | ||
<li id="abstract" class="liList"> | <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; ></div> | + | <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="myheader"id="main"><img class="strory-telling3" src="https://static.igem.org/mediawiki/2017/1/1e/T-NUDT_CHINA-story3.png" no-repeat; ></div> | + | <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> | ||
Latest revision as of 02:17, 2 November 2017