Line 1: | Line 1: | ||
{{NUDT_CHINA}} | {{NUDT_CHINA}} | ||
+ | <!doctype html> | ||
+ | <html lang="en"> | ||
+ | <head> | ||
+ | <meta charset="utf-8"> | ||
+ | <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
+ | <title>Team:NUDT_CHINA</title> | ||
+ | <script type="text/javascript" > | ||
+ | function StatingPages(tag){ | ||
+ | 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 aLiMenu = oMenu.getElementsByTagName('li'); | ||
+ | |||
+ | var iNow = 0; | ||
+ | var prevIndex = 0; | ||
+ | var iContentHeight = 0; | ||
+ | showLoading(); | ||
+ | contentAuto(); | ||
+ | listContentAuto(); | ||
+ | bindNav(); | ||
+ | mouseWheel(); | ||
+ | homeContent(); | ||
+ | window.onresize = fnResize; | ||
+ | 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"> | ||
+ | <!--li{ list-style:none;} | ||
+ | #Qidilist{ width:100%; position:absolute; top:0; left:0; transition:.5s top;} | ||
+ | #Qidilist .liList{ width:2000px; position:relative; left:50%; margin-left:-1000px; overflow:hidden;} | ||
+ | #lay-menu{ position:fixed; right:0; top:50%; z-index:20;} | ||
+ | #lay-menu li{ width:10px; height:10px; border-radius:50%; margin:10px; border:1px white solid; cursor:pointer;} | ||
+ | #lay-menu li.active{ background:white; cursor:default;} | ||
+ | #home{ background:url(img/bg1.jpg) no-repeat; overflow-x: hidden;top: 0px;height: 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;} | ||
+ | #homeContent .homeContent1 li{ width:100%; height:100%; position:absolute; left:0; top:0; background:black; visibility:hidden;} | ||
+ | #homeContent .homeContent1 li:nth-of-type(1){background:#dc6c5f;} | ||
+ | #homeContent .homeContent1 li:nth-of-type(2){background:#95dc84;} | ||
+ | #homeContent .homeContent1 li:nth-of-type(3){background:#64b9d2;} | ||
+ | #homeContent .homeContent1 li h1{ color:white; text-align:center; padding-top:200px;} | ||
+ | #homeContent .homeContent1 li.active{ z-index:1; visibility:visible;} | ||
+ | #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"> |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | #loading div{ width:100%; height:50%; position:absolute; left:0; background:#009ee0; z-index:50; transition:1s;} | |
− | + | #loading div:nth-of-type(1){ top: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;} | ||
− | </ | + | .pure-button { |
+ | background-color: #1f8dd6; | ||
+ | padding: 0.5em 2em; | ||
+ | border-radius: 5px; | ||
+ | background: white; | ||
+ | color: #1f8dd6; | ||
+ | border-radius: 5px; | ||
+ | font-size: 120%; | ||
+ | display:inline-block;zoom:1; | ||
+ | white-space:nowrap; | ||
+ | cursor:pointer; | ||
+ | list-style:none; | ||
+ | text-decoration:none; | ||
+ | } | ||
+ | --> | ||
+ | </style> | ||
+ | </head> | ||
+ | <body> | ||
+ | |||
+ | <div id="loading"> | ||
+ | <div></div> | ||
+ | <div> | ||
+ | <div align="center"> | ||
+ | <a href='#' class="pure-button "onclick="StatingPages('True')">Get Started</a> | ||
+ | </div> | ||
+ | </div> | ||
+ | <span></span> | ||
+ | </div> | ||
+ | <div id="layout"> | ||
+ | <a href="#menu" id="menuLink" class="menu-link"> | ||
+ | <span></span> | ||
+ | </a> | ||
+ | <div id="menu"> | ||
+ | <div class="pure-menu"><img src="icon1.jpg" width=150px height=120px alt=""> | ||
+ | <ul class="pure-menu-list"> | ||
+ | <li class="pure-menu-item"><a class="pure-menu-heading" href="#" class="pure-menu-link">Home</a></li> | ||
+ | |||
+ | <li class="pure-menu-item pure-menu-has-children"> | ||
+ | <a href="#" class="pure-menu-link"onclick="Show('team_show')">TEAM</a> | ||
+ | <ul class="pure-menu-children" id="team_show"> | ||
+ | <li class="pure-menu-item"><a href="#" class="pure-menu-link">Team</a></li> | ||
+ | <li class="pure-menu-item"><a href="#" class="pure-menu-link">Collaborations</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li class="pure-menu-item pure-menu-has-children"> | ||
+ | <a href="#" class="pure-menu-link"onclick="Show('project_show')">PROJECT</a> | ||
+ | <ul class="pure-menu-children" id="project_show"> | ||
+ | <li class="pure-menu-item"><a href="#" class="pure-menu-link">Description</a></li> | ||
+ | <li class="pure-menu-item"><a href="#" class="pure-menu-link">Design</a></li> | ||
+ | <li class="pure-menu-item"><a href="#" class="pure-menu-link">Experiment</a></li> | ||
+ | <li class="pure-menu-item"><a href="#" class="pure-menu-link">Notebook</a></li> | ||
+ | <li class="pure-menu-item"><a href="#" class="pure-menu-link">InterLab</a></li> | ||
+ | <li class="pure-menu-item"><a href="#" class="pure-menu-link">Contribution</a></li> | ||
+ | <li class="pure-menu-item"><a href="#" class="pure-menu-link">Model</a></li> | ||
+ | <li class="pure-menu-item"><a href="#" class="pure-menu-link">Results</a></li> | ||
+ | <li class="pure-menu-item"><a href="#" class="pure-menu-link">Demonstrate</a></li> | ||
+ | <li class="pure-menu-item"><a href="#" class="pure-menu-link">Improve</a></li> | ||
+ | <li class="pure-menu-item"><a href="#" class="pure-menu-link">Attributions</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li class="pure-menu-item pure-menu-has-children"> | ||
+ | <a href="#" class="pure-menu-link"onclick="Show('part_show')">PARTS</a> | ||
+ | <ul class="pure-menu-children" id="part_show"> | ||
+ | <li class="pure-menu-item"><a href="#" class="pure-menu-link">Parts</a></li> | ||
+ | <li class="pure-menu-item"><a href="#" class="pure-menu-link">Basic Parts</a></li> | ||
+ | <li class="pure-menu-item"><a href="#" class="pure-menu-link">Composite Parts</a></li> | ||
+ | <li class="pure-menu-item"><a href="#" class="pure-menu-link">Part Collection</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li class="pure-menu-item"><a href="#" class="pure-menu-link">SAFETY</a></li> | ||
+ | <li class="pure-menu-item pure-menu-has-children"> | ||
+ | <a href="#" class="pure-menu-link"onclick="Show('HP_show')">HP</a> | ||
+ | <ul class="pure-menu-children" id="HP_show"> | ||
+ | <li class="pure-menu-item"><a href="#" class="pure-menu-link">Sliver HP</a></li> | ||
+ | <li class="pure-menu-item"><a href="#" class="pure-menu-link">Integrated and Gold</a></li> | ||
+ | <li class="pure-menu-item"><a href="#" class="pure-menu-link">Public Engagement</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li class="pure-menu-item pure-menu-has-children"> | ||
+ | <a href="#" 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="#" class="pure-menu-link">Applied Design</a></li> | ||
+ | <li class="pure-menu-item"><a href="#" class="pure-menu-link">Enterpreneurship</a></li> | ||
+ | <li class="pure-menu-item"><a href="#" class="pure-menu-link">Hardware</a></li> | ||
+ | <li class="pure-menu-item"><a href="#" class="pure-menu-link">Measurement</a></li> | ||
+ | <li class="pure-menu-item"><a href="#" class="pure-menu-link">Model</a></li> | ||
+ | <li class="pure-menu-item"><a href="#" class="pure-menu-link">Plant</a></li> | ||
+ | <li class="pure-menu-item"><a href="#" class="pure-menu-link">Software</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li class="pure-menu-item"><a href="#" class="pure-menu-link">JUDGINF FORM</a></li> | ||
+ | |||
+ | </ul> | ||
+ | </div> | ||
+ | </div> | ||
− | + | ||
− | <div class=" | + | <div id="content"class="content"> |
− | < | + | <ul id="lay-menu"> |
− | < | + | <li class="active"></li> |
− | < | + | <li></li> |
− | + | <li></li> | |
+ | <li></li> | ||
+ | </ul> | ||
+ | <ul id="Qidilist"> | ||
+ | <li id="abstract" class="liList"> | ||
+ | |||
+ | <div class="header"> | ||
+ | <h1>NUDT_CHINA</h1> | ||
+ | <h2>The abstract of our work</h2> | ||
+ | </div> | ||
+ | |||
+ | </li> | ||
+ | <li id="home" class="liList"> | ||
+ | <div id="homeContent" class="divList"> | ||
+ | <ul class="homeContent1"> | ||
+ | </ul> | ||
+ | <ul class="homeContent2"> | ||
+ | </ul> | ||
+ | </div> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | |||
</div> | </div> | ||
− | + | </body> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | </ | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
</html> | </html> |
Revision as of 14:19, 16 October 2017