Difference between revisions of "Team:NUDT CHINA"

 
(47 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();
touchMove();
 
 
bindNav();
 
bindNav();
 
add1();
 
add1();
 +
add2();
 
window.onresize = fnResize;   
 
window.onresize = fnResize;   
 
function add1() {
 
function add1() {
Line 28: Line 32:
 
};
 
};
 
}
 
}
function mouseWheel(){
+
function add2() {
var bBtn = true;
+
btn1.onclick=function () {
var timer = null;
+
toMove(1);
if(oContent.addEventListener){
+
iNow=1;
oContent.addEventListener('DOMMouseScroll',function(ev){
+
var ev = ev || window.event;
+
clearTimeout(timer);
+
timer = setTimeout(function(){
+
toChange(ev);
+
},200);
+
},false);
+
 
}
 
}
oContent.onmousewheel = function(ev){
+
btn2.onclick=function () {
var ev = ev || window.event;
+
toMove(2);
clearTimeout(timer);
+
iNow=2;
timer = setTimeout(function(){
+
}
toChange(ev);
+
btn3.onclick=function () {
},200);
+
toMove(3);
};
+
iNow=3;
+
}
function toChange(ev){
+
btn4.onclick=function () {
if(ev.detail){
+
toMove(0);
bBtn = ev.detail > 0 ? true : false;
+
iNow=0;
}
+
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 mouseWheel(){
function touchMove(){
+
 
var bBtn = true;
 
var bBtn = true;
 
var timer = null;
 
var timer = null;
 
if(oContent.addEventListener){
 
if(oContent.addEventListener){
oContent.addEventListener('touchmove',function(ev){
+
oContent.addEventListener('DOMMouseScroll',function(ev){
 
var ev = ev || window.event;
 
var ev = ev || window.event;
 
clearTimeout(timer);
 
clearTimeout(timer);
Line 215: Line 182:
 
</script>
 
</script>
 
<style type="text/css">
 
<style type="text/css">
.button-next{
+
.button-next{   font-weight: bold;
  position: absolute;
+
    font-family: "Lucida Console","Lucida Sans Typewriter",monaco,"Bitstream Vera Sans Mono",monospace;
   height: 10%;
+
    position: absolute;
   width: 15%;
+
    min-width: 180px;
   margin-bottom: 0;
+
    min-height: 40px;
 +
   height: 7%;
 +
   width: 13%;
 +
   bottom: 1%;
 
   background: #fff;
 
   background: #fff;
 
   border: 1px solid #fff;
 
   border: 1px solid #fff;
   border-radius: 4px;
+
   border-radius: 2px;
 
   color: #222;
 
   color: #222;
  font-size: 16px;
 
 
   text-align: center;
 
   text-align: center;
 
   cursor: pointer;
 
   cursor: pointer;
 
   transition: .2s ease-in-out;
 
   transition: .2s ease-in-out;
   transform: translate(-50%, -50%);
+
   transform: translate(-50%, -50%);font-size: large;
 
}
 
}
 
.button-next:hover {
 
.button-next:hover {
Line 234: Line 203:
 
   color: #fff;
 
   color: #fff;
 
}
 
}
.myheader{height: 100%; text-align: center; background-color: rgba(255,255,255,0.3);margin:0 auto;position: relative;}
+
.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 243: Line 212:
  
 
.myheader img{width:100%; margin: 0;position: absolute;  top: 50%;transform: translate(0, -50%); left: 0;max-height: 80%;}
 
.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;}
Line 254: Line 225:
 
@media (min-width: 92em) {
 
@media (min-width: 92em) {
 
   .myheader {
 
   .myheader {
         width: 70%;}
+
         width: 85%;}
 
}
 
}
 
@media (max-width: 92em) {
 
@media (max-width: 92em) {
 
   .myheader {
 
   .myheader {
         width: 80%;}
+
         width: 85%;}
 
}
 
}
 
@media (max-width: 45em) {
 
@media (max-width: 45em) {
Line 265: Line 236:
 
}
 
}
  
.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 274: Line 246:
 
   border-radius: 4px;
 
   border-radius: 4px;
 
   color: #222;
 
   color: #222;
   font-size: 16px;
+
   font-size: large;
 
   text-align: center;
 
   text-align: center;
 
   cursor: pointer;
 
   cursor: pointer;
Line 283: Line 255:
 
   color: #fff;
 
   color: #fff;
 
}
 
}
.under-bg{z-index: 0.5;opacity: 0.8; position: fixed; top: 0; left: 0; width: 100%; height: 100%;}
+
.under-bg{z-index: 0.5;opacity: 1; position: fixed; top: 0; left: 0; width: 100%; height: 100%;}
 
</style>
 
</style>
  
Line 303: 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 319: 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 337: 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>   
Line 365: 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>
 
             <li></li>
Line 372: 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; ><button class="button-next">Next</button></div>
+
            <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>
 
       <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

Team:NUDT_CHINA