|
|
| Line 6: |
Line 6: |
| | <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" >
| |
| − | window.onload=function(){
| |
| − | var oContent = $('content');
| |
| − | var oLoading = $('loading');
| |
| − | var oList = $('Qidilist');
| |
| − | 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 oNextBtn=$('next-button');
| |
| − | var aLiMenu = oMenu.getElementsByTagName('li');
| |
| − | var Btn1=$('button-after-1');
| |
| − | var Btn2=$('button-after-2');
| |
| − | var Btn3=$('button-after-3');
| |
| − | var iNow = 0;
| |
| − | var prevIndex = 0;
| |
| − | var iContentHeight = 0;
| |
| − | contentAuto();
| |
| − | listContentAuto();
| |
| − | bindNav();
| |
| − | mouseWheel();
| |
| − | homeContent();
| |
| − | add1();
| |
| − | add2();
| |
| − | window.onresize = fnResize;
| |
| − | function add1() {
| |
| − | oNextBtn.onclick=function () {
| |
| − | showLoading();
| |
| − | };
| |
| − | }
| |
| − | function add2() {
| |
| − | Btn1.onclick=function () {
| |
| − | toMove(1);
| |
| − | };
| |
| − | Btn2.onclick=function () {
| |
| − | toMove(2);
| |
| − | };
| |
| − | Btn3.onclick=function () {
| |
| − | toMove(0);
| |
| − | };
| |
| − | }
| |
| − | function showLoading(){
| |
| − | var oSpan = oLoading.getElementsByTagName('span')[0];
| |
| − | var aDiv = oLoading.getElementsByTagName('div');
| |
| − | 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;
| |
| − | }
| |
| − | }
| |
| − | aDiv[0].addEventListener('webkitTransitionend',divChange,false);
| |
| − | aDiv[0].addEventListener('transitionend',divChange,false);
| |
| − |
| |
| − | function divChange(){
| |
| − | oLoading.parentNode.removeChild(oLoading);
| |
| − | }
| |
| − |
| |
| − | }
| |
| | | | |
| − | 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 listContentAuto(){
| |
| − | var mt = (iContentHeight - 520)/2;
| |
| − | for(var i=0;i<aDivList.length;i++){
| |
| − | aDivList[i].style.marginTop = mt+'px';
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | function fnResize(){
| |
| − | contentAuto();
| |
| − | listContentAuto();
| |
| − | }
| |
| − |
| |
| − | 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 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){
| |
| − | return document.getElementById(id);
| |
| − | }
| |
| − |
| |
| − | function viewWidth(){
| |
| − | return window.innerWidth || document.documentElement.clientWidth;
| |
| − | }
| |
| − |
| |
| − | function viewHeight(){
| |
| − | return window.innerHeight || document.documentElement.clientHeight;
| |
| − | }
| |
| − |
| |
| − | function getByClass(oParent,sClass){
| |
| − | var aElem = oParent.getElementsByTagName('*');
| |
| − | var arr = [];
| |
| − | for(var i=0;i<aElem.length;i++){
| |
| − | if( aElem[i].className == sClass ){
| |
| − | arr.push( aElem[i] );
| |
| − | }
| |
| − | }
| |
| − | return arr;
| |
| − | }
| |
| − | }
| |
| − | </script>
| |
| | <style type="text/css"> | | <style type="text/css"> |
| | .myheader { | | .myheader { |
| Line 471: |
Line 213: |
| | | | |
| | | | |
| − | <div id="loading">
| + | |
| − | <div></div>
| + | |
| − | <div>
| + | |
| − | <a class="next-button" id="next-button">Get Started!</a>
| + | |
| − | </div>
| + | |
| − | <span></span>
| + | |
| − | </div>
| + | |
| | <div id="layout"> | | <div id="layout"> |
| | <a href="#menu" id="menuLink" class="menu-link"> | | <a href="#menu" id="menuLink" class="menu-link"> |
| Line 546: |
Line 282: |
| | | | |
| | | | |
| − | <div id="content"class="content">
| + | |
| − | <ul id="lay-menu">
| + | |
| − | <li class="active"></li>
| + | |
| − | <li></li>
| + | |
| − | <li></li>
| + | |
| − | </ul>
| + | |
| − | <ul id="Qidilist">
| + | |
| − | <li id="abstract" class="liList">
| + | |
| − |
| + | |
| − | <div class="Myheader"><div class="myheader">
| + | |
| − | <h5>NUDT_CHINA</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>
| + | |
| − | <br><h6>However, the functions of most microRNAs remain to be discovered. Our project attempts to develop a novel sponge for miRNAs, which would knock down the abundance of target miRNA in the cells. </h6>
| + | |
| − | <br><h6>Thus the sponge will be a miRNA inhibitor to be used to induce miRNA loss-of-function phenotypes or other further applications like small non-coding RNA-based diagnostic and therapeutic applications.</h6>
| + | |
| − | </div></div>
| + | |
| − | <a class="button-after" id="button-after-1">Our Story</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-2">Daily Pics</a>
| + | |
| − | </li>
| + | |
| − | <li id="Team" class="liList">
| + | |
| − |
| + | |
| − | <a class="button-after" id="button-after-3">Back</a>
| + | |
| − | </li>
| + | |
| − |
| + | |
| − |
| + | |
| − | </ul>
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | </div>
| + | |
| | | | |
| | <script type="text/javascript"> | | <script type="text/javascript"> |
