|
|
| Line 11: |
Line 11: |
| | var oList = $('Qidilist'); | | var oList = $('Qidilist'); |
| | var aLiList = getByClass( oList , 'liList' ); | | var aLiList = getByClass( oList , 'liList' ); |
| − | var aDivList = getByClass( oList , 'divList' );
| |
| − | var oHomeContent = $('homeContent');
| |
| − | var oHomeContent1 = getByClass(oHomeContent , 'homeContent1')[0];
| |
| − | var oHomeContent2 = getByClass(oHomeContent , 'homeContent2')[0];
| |
| | 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 Btn1=$('button-after-1');
| |
| − | var Btn2=$('button-after-2');
| |
| − | var Btn3=$('button-after-3');
| |
| − | var Btn4=$('button-after-4');
| |
| − | var Btn0=$('button-after-0');
| |
| | var iNow = 0; | | var iNow = 0; |
| | var prevIndex = 0; | | var prevIndex = 0; |
| | var iContentHeight = 0; | | var iContentHeight = 0; |
| | contentAuto(); | | contentAuto(); |
| − | listContentAuto();
| |
| | bindNav(); | | bindNav(); |
| | homeContent(); | | homeContent(); |
| | add1(); | | add1(); |
| − | add2();
| |
| | window.onresize = fnResize; | | window.onresize = fnResize; |
| | function add1() { | | function add1() { |
| | oNextBtn.onclick=function () { | | oNextBtn.onclick=function () { |
| | showLoading(); | | showLoading(); |
| − | };
| |
| − | }
| |
| − | function add2() {
| |
| − | Btn1.onclick=function () {
| |
| − | toMove(1);
| |
| − | };
| |
| − | Btn2.onclick=function () {
| |
| − | toMove(2);
| |
| − | };
| |
| − | Btn3.onclick=function () {
| |
| − | toMove(3);
| |
| − | };
| |
| − | Btn4.onclick=function () {
| |
| − | toMove(4);
| |
| − | };
| |
| − | Btn0.onclick=function () {
| |
| − | toMove(0);
| |
| | }; | | }; |
| | } | | } |
| Line 93: |
Line 65: |
| | } | | } |
| | aLiMenu[index].className = 'active'; | | aLiMenu[index].className = 'active'; |
| − |
| |
| − |
| |
| − |
| |
| | } | | } |
| | | | |
| Line 105: |
Line 74: |
| | } | | } |
| | oList.style.top = - iNow * iContentHeight + 'px'; | | oList.style.top = - iNow * iContentHeight + 'px'; |
| − | }
| |
| − |
| |
| − | function listContentAuto(){
| |
| − | var mt = (iContentHeight - 520)/2;
| |
| − | for(var i=0;i<aDivList.length;i++){
| |
| − | aDivList[i].style.marginTop = mt+'px';
| |
| − | }
| |
| | } | | } |
| | | | |
| | function fnResize(){ | | function fnResize(){ |
| | contentAuto(); | | contentAuto(); |
| − | listContentAuto();
| |
| | } | | } |
| | | | |
| − |
| |
| − | function homeContent(){
| |
| − | var aLi1 = oHomeContent1.getElementsByTagName('li');
| |
| − | var aLi2 = oHomeContent2.getElementsByTagName('li');
| |
| − | var oldIndex = 0;
| |
| − | var iNowHome = 0;
| |
| − |
| |
| − | var data = [
| |
| − | { text : 'one layer'},
| |
| − | { text : 'two layer'},
| |
| − | { text : 'three layer'},
| |
| − | { text : 'four layer'}
| |
| − | ];
| |
| − | create();
| |
| − | function create(){
| |
| − | for(var i=0;i<data.length;i++){
| |
| − | var oLi1 = document.createElement('li');
| |
| − | oLi1.innerHTML = '<h1 class="commonTitle">'+(data[i].text)+'</h1>';
| |
| − | var oLi2 = document.createElement('li');
| |
| − | if(i == 0){
| |
| − | oLi1.className = 'active';
| |
| − | oLi2.className = 'active';
| |
| − | }
| |
| − | oHomeContent1.appendChild(oLi1);
| |
| − | oHomeContent2.appendChild(oLi2);
| |
| − | }
| |
| − |
| |
| − | }
| |
| − |
| |
| − | for(var i=0;i<aLi2.length;i++){
| |
| − | aLi2[i].index = i;
| |
| − | aLi2[i].onclick = function(){
| |
| − | for(var i=0;i<aLi2.length;i++){
| |
| − | aLi2[i].className = '';
| |
| − | }
| |
| − | this.className = 'active';
| |
| − |
| |
| − | if( oldIndex < this.index ){ //从左向右
| |
| − | aLi1[oldIndex].className = 'leftHide';
| |
| − | aLi1[this.index].className = 'rightShow';
| |
| − | }
| |
| − | else if( oldIndex > this.index ){ //从右向走
| |
| − | aLi1[oldIndex].className = 'rightHide';
| |
| − | aLi1[this.index].className = 'leftShow';
| |
| − | }
| |
| − | oldIndex = this.index;
| |
| − | iNowHome = this.index;
| |
| − | };
| |
| − | }
| |
| − |
| |
| − | var timer = setInterval(change,3000);
| |
| − |
| |
| − | oHomeContent.onmouseover = function(){
| |
| − | clearInterval(timer);
| |
| − | };
| |
| − |
| |
| − | function change(){
| |
| − | iNowHome++;
| |
| − |
| |
| − | if(iNowHome == aLi2.length){
| |
| − | iNowHome = 0;
| |
| − | }
| |
| − |
| |
| − | for(var i=0;i<aLi2.length;i++){
| |
| − | aLi2[i].className = '';
| |
| − | }
| |
| − | aLi2[iNowHome].className = 'active';
| |
| − | aLi1[oldIndex].className = 'leftHide';
| |
| − | aLi1[iNowHome].className = 'rightShow';
| |
| − |
| |
| − | oldIndex = iNowHome;
| |
| − |
| |
| − | }
| |
| − | }
| |
| | function $(id){ | | function $(id){ |
| | return document.getElementById(id); | | return document.getElementById(id); |
| Line 228: |
Line 115: |
| | #lay-menu li.active{ background:black; cursor:default;} | | #lay-menu li.active{ background:black; cursor:default;} |
| | #home{ overflow-x: hidden; top: 0px;height: 100%;width: 100%;background:url(https://static.igem.org/mediawiki/2017/c/cc/T-NUDT_CHINA-MainPage1.jpg); background-size:110%,500%;} | | #home{ overflow-x: hidden; top: 0px;height: 100%;width: 100%;background:url(https://static.igem.org/mediawiki/2017/c/cc/T-NUDT_CHINA-MainPage1.jpg); background-size:110%,500%;} |
| − | #abstract{ overflow-x: hidden; top: 0px;height: 100%;width: 100%;background:url(https://static.igem.org/mediawiki/2017/c/cc/T-NUDT_CHINA-MainPage1.jpg); background-size:110%,500%;} | + | #abstract{ overflow-x: hidden; top: 0px;height: 100%;width: 100%;} |
| − | #homeContent .homeContent1{ width:100%; height:100%; position:relative; perspective:800px; transform-style:preserve-3d; -webkit-perspective:800px; -webkit-transform-style:preserve-3d; transition:1s;}
| + | .myheader img{position: absolute;width:100%;align-self: center center;} |
| − | #homeContent .homeContent1 li{ width:100%; height:100%; position:absolute; left:0; top:0; background-image:url(https://static.igem.org/mediawiki/2017/2/20/T-NUDT_CHINA-group1.jpeg);background-size:100% 100%;background-repeat:no-repeat; visibility:hidden;}
| + | |
| − | #homeContent .homeContent1 li{border-line:20px;}
| + | |
| − | #homeContent .homeContent1 li h1{ color:white; text-align:center; bottom:0}
| + | |
| − | #homeContent .homeContent1 li.active{ z-index:1; visibility:visible;}
| + | |
| − | #homeContent .homeContent1 li:nth-of-type(1){background-image:url(https://static.igem.org/mediawiki/2017/2/2e/T-NUDT_CHINA-group2.jpeg);background-size:100% 100%;background-repeat:no-repeat; }
| + | |
| − | #homeContent .homeContent1 li:nth-of-type(2){background-image:url(https://static.igem.org/mediawiki/2017/7/7c/T-NUDT_CHINA-group3.jpeg);background-size:100% 100%;background-repeat:no-repeat; }
| + | |
| − | #homeContent .homeContent1 li:nth-of-type(3){background-image:url(https://static.igem.org/mediawiki/2017/d/d9/T-NUDT_CHINA-group4.jpeg);background-size:100% 100%;background-repeat:no-repeat; }
| + | |
| − | #homeContent .homeContent1 li:nth-of-type(4){background-image:url(https://static.igem.org/mediawiki/2017/f/f9/T-NUDT_CHINA-GIFtest1.gif);background-size:100% 100%;background-repeat:no-repeat; }
| + | |
| − | #homeContent h1{border-bottom: none;}
| + | |
| − | #homeContent .homeContent2{ position:absolute; bottom:0; z-index:2; text-align:center; width:100%; transition:1s;}
| + | |
| − | #homeContent .homeContent2 li{ width:20px; height:20px; border-radius:50%; background:rgba(255,255,255,0.5); display:inline-block; margin:2px; box-shadow:0 0 4px rgba(25,25,25,0.8); cursor:pointer;}
| + | |
| − | #homeContent .homeContent2 li.active{ background:white; cursor:default;}
| + | |
| − | | + | |
| − | #homeContent .homeContent1 .leftShow{ animation:1s homeLeftShow; visibility:visible; z-index:3;-webkit-animation:1s homeLeftShow;}
| + | |
| − | #homeContent .homeContent1 .rightHide{ animation:1s homeRightHide; visibility:hidden; -webkit-animation:1s homeRightHide;}
| + | |
| − | | + | |
| − | #homeContent .homeContent1 .leftHide{ animation:1s homeLeftHide; visibility:hidden; -webkit-animation:1s homeLeftHide;}
| + | |
| − | #homeContent .homeContent1 .rightShow{ animation:1s homeRightShow; visibility:visible; z-index:3; -webkit-animation:1s homeRightShow;}
| + | |
| − | </style>
| + | |
| − | <style type="text/css">
| + | |
| − | @keyframes homeLeftHide{
| + | |
| − | 0%{ transform:translateZ(0px); visibility:visible;}
| + | |
| − | 40%{ transform:translate(-40%,0) scale(0.8) rotateY(20deg);}
| + | |
| − | 100%{ transform:translateZ(-200px);}
| + | |
| − | }
| + | |
| − | @keyframes homeRightShow{
| + | |
| − | 0%{ transform:translateZ(-200px);}
| + | |
| − | 40%{ transform:translate(40%,0) scale(0.8) rotateY(-20deg);}
| + | |
| − | 100%{ transform:translateZ(0px);}
| + | |
| − | }
| + | |
| − | | + | |
| − | @-webkit-keyframes homeLeftHide{
| + | |
| − | 0%{ -webkit-transform:translateZ(0px); visibility:visible;}
| + | |
| − | 40%{ -webkit-transform:translate(-40%,0) scale(0.8) rotateY(20deg);}
| + | |
| − | 100%{ -webkit-transform:translateZ(-200px);}
| + | |
| − | }
| + | |
| − | @-webkit-keyframes homeRightShow{
| + | |
| − | 0%{ -webkit-transform:translateZ(-200px);}
| + | |
| − | 40%{ -webkit-transform:translate(40%,0) scale(0.8) rotateY(-20deg);}
| + | |
| − | 100%{ -webkit-transform:translateZ(0px);}
| + | |
| − | }
| + | |
| − | | + | |
| − | @keyframes homeLeftShow{
| + | |
| − | 0%{ transform:translateZ(-200px);}
| + | |
| − | 40%{ transform:translate(-40%,0) scale(0.8) rotateY(20deg);}
| + | |
| − | 100%{ transform:translateZ(0px);}
| + | |
| − | }
| + | |
| − | @keyframes homeRightHide{
| + | |
| − | 0%{ transform:translateZ(0px); visibility:visible;}
| + | |
| − | 40%{ transform:translate(40%,0) scale(0.8) rotateY(-20deg);}
| + | |
| − | 100%{ transform:translateZ(-200px);}
| + | |
| − | }
| + | |
| − | @-webkit-keyframes homeLeftShow{
| + | |
| − | 0%{ -webkit-transform:translateZ(-200px);}
| + | |
| − | 40%{ -webkit-transform:translate(-40%,0) scale(0.8) rotateY(20deg);}
| + | |
| − | 100%{ -webkit-transform:translateZ(0px);}
| + | |
| − | }
| + | |
| − | @-webkit-keyframes homeRightHide{
| + | |
| − | 0%{ -webkit-transform:translateZ(0px); visibility:visible;}
| + | |
| − | 40%{ -webkit-transform:translate(40%,0) scale(0.8) rotateY(-20deg);}
| + | |
| − | 100%{ -webkit-transform:translateZ(-200px);}
| + | |
| − | }
| + | |
| − | /* home end */
| + | |
| − | </style>
| + | |
| − | | + | |
| − | <style type="text/css">
| + | |
| − | | + | |
| − | .Myheader{border-bottom: none;}
| + | |
| | #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 306: |
Line 125: |
| | color: #777; | | color: #777; |
| | } | | } |
| − | .myheader{width: 80%;}
| + | |
| | #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;} |
| − | #Qidilist .divList{ width:75%; margin:0px auto; position:relative;height:70%;}
| |
| | .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 h5 { | + | .myheader { |
| − | padding-bottom:1em;} | + | width: 70%;} |
| | } | | } |
| | @media (max-width: 92em) { | | @media (max-width: 92em) { |
| − | .Myheader{margin-top:1em;}
| + | .myheader { |
| − | .myheader h5 { | + | width: 80%;} |
| − | padding-bottom:0.8em;} | + | |
| | } | | } |
| − | @media (max-width: 50em) { | + | @media (max-width: 45em) { |
| − | .Myheader{margin-top:0.2em;}
| + | .myheader { |
| − | .myheader h5 { | + | width: 10%;} |
| − | padding-bottom:0.5em;} | + | |
| | } | | } |
| − | </style>
| + | |
| − |
| + | |
| − | <style type="text/css">
| + | |
| − | .myheader {
| + | |
| − | margin:0 auto;
| + | |
| − | background-color:rgba(255,255,255,0.85);
| + | |
| − | }
| + | |
| − | .myheader h5 {
| + | |
| − | font-family: 'Monad';
| + | |
| − | line-height:1.3;
| + | |
| − | font-size: 4.2em;
| + | |
| − | font-weight: 300;
| + | |
| − | border-bottom:none;
| + | |
| − | }
| + | |
| − | .myheader h6 {
| + | |
| − | line-height: 1.2;
| + | |
| − | text-align: left;
| + | |
| − | font-size: 2.3em;
| + | |
| − | color: grey;
| + | |
| − | font-weight: 300;
| + | |
| − | margin-top: 2px;
| + | |
| − | }
| + | |
| − | .myheader{padding-bottom:20px;}
| + | |
| − | .button-after {margin-bottom:30px;
| + | |
| − | display: inline-block;
| + | |
| − | z-index:10;
| + | |
| − | margin:o auto;
| + | |
| − | padding: .65em 4em;
| + | |
| − | background: -webkit-linear-gradient(#fe5f95 , #ff3f7f);
| + | |
| − | background: linear-gradient(#fe5f95 , #ff3f7f);
| + | |
| − | border: 1px solid #fe3276;
| + | |
| − | border-radius: 4px;
| + | |
| − | color: #fff;
| + | |
| − | text-decoration: none;
| + | |
| − | text-align: center;
| + | |
| − | -webkit-transition: .3s ease-in-out;
| + | |
| − | transition: .3s ease-in-out;
| + | |
| − | margin-bottom: 0px;
| + | |
| − | }
| + | |
| − | .button-after:hover {
| + | |
| − | -webkit-animation: bounce 2s ease-in-out;
| + | |
| − | animation: bounce 2s ease-in-out;
| + | |
| − | }
| + | |
| − | @-webkit-keyframes bounce {
| + | |
| − | 5% { -webkit-transform: scale(1.1, .8); }
| + | |
| − | 10% { -webkit-transform: scale(.8, 1.1) translateY(-5px); }
| + | |
| − | 15% { -webkit-transform: scale(1, 1); }
| + | |
| − | }
| + | |
| − | @keyframes bounce {
| + | |
| − | 5% { transform: scale(1.1, .8); }
| + | |
| − | 10% { transform: scale(.8, 1.1) translateY(-5px); }
| + | |
| − | 15% { transform: scale(1, 1); }
| + | |
| − | }</style>
| + | |
| − |
| + | |
| − | <style type="text/css">
| + | |
| | .next-button {z-index:10;position:absolute; | | .next-button {z-index:10;position:absolute; |
| | top: 40%; | | top: 40%; |
| Line 397: |
Line 159: |
| | color: #fff; | | color: #fff; |
| | } | | } |
| | + | .under-bg{z-index: 0.5;opacity: 0.8; 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><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/1/17/T-NUDT_CHINA-loadingBg3.jpg" alt="" class="big-bg"></div> |
| Line 483: |
Line 247: |
| | </ul> | | </ul> |
| | <ul id="Qidilist"> | | <ul id="Qidilist"> |
| − | <li id="abstract" class="liList">
| |
| − |
| |
| − | <div class="Myheader" id="main" ><div class="myheader">
| |
| − | <h5>Description</h5>
| |
| − | <h6>MicroRNAs (miRNAs) have been proven to play important roles on post-transcriptionalregulation of the gene expression by direct base pairing to target sites within untranslated regions of messenger RNAs.</h6>
| |
| − |
| |
| − | </div></div>
| |
| − | <a class="button-after" id="button-after-1">How it works?</a>
| |
| − | </li>
| |
| | <li id="abstract" class="liList"> | | <li id="abstract" class="liList"> |
| − | <div class=" Myheader"><img class="strory-telling1" src="https://static.igem.org/mediawiki/2017/a/ad/T-NUDT_CHINA-story1.png"width=70%, no-repeat; ></div > | + | <div class=" myheader"id="main"><img class="strory-telling1" src="https://static.igem.org/mediawiki/2017/a/ad/T-NUDT_CHINA-story1.png"width=70%, no-repeat; ></div> |
| − | <a class="button-after" id="button-after-2">NEXT</a>
| + | |
| | </li> | | </li> |
| | <li id="abstract" class="liList"> | | <li id="abstract" class="liList"> |
| − | <div class=" Myheader"><img class="strory-telling2" src="https://static.igem.org/mediawiki/2017/3/35/T-NUDT_CHINA-story2.png"width=70%, no-repeat; ></div > | + | <div class=" myheader"><img class="strory-telling2" src="https://static.igem.org/mediawiki/2017/3/35/T-NUDT_CHINA-story2.png"width=70%, no-repeat; ></div> |
| − | <a class="button-after" id="button-after-3">AND</a>
| + | |
| | </li> | | </li> |
| | <li id="abstract" class="liList"> | | <li id="abstract" class="liList"> |
| − | <div class=" Myheader"><img class="strory-telling3" src="https://static.igem.org/mediawiki/2017/1/1e/T-NUDT_CHINA-story3.png"width=70%, no-repeat; ></div > | + | <div class=" myheader"><img class="strory-telling3" src="https://static.igem.org/mediawiki/2017/1/1e/T-NUDT_CHINA-story3.png"width=70%, no-repeat; ></div> |
| − | <a class="button-after" id="button-after-4">Our Dailies</a>
| + | |
| − | </li>
| + | |
| − | <li id="home" class="liList">
| + | |
| − | <div id="homeContent" class="divList">
| + | |
| − | <ul class="homeContent1">
| + | |
| − | </ul>
| + | |
| − | <ul class="homeContent2">
| + | |
| − | </ul>
| + | |
| − | </div>
| + | |
| − | <a class="button-after" id="button-after-0">Back</a>
| + | |
| | </li> | | </li> |
| | + | |
| | </ul> | | </ul> |
| | </div> | | </div> |
