Difference between revisions of "Team:NUDT CHINA"

Line 5: Line 5:
 
     <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">
 
li{ list-style:none;}
 
li{ list-style:none;}

Revision as of 12:23, 18 October 2017

HOME
TEAM
PROJECT
Description
Design
Experiments
Notebook
InterLab
Contribution
Model
Results
Demonstrate
Improve
Attributions
PARTS
Parts
Basic Parts
Composite Parts
Part Collection
SAFETY
HUMAN PRACTICES
Silver HP
Integrated and Gold
Public Engagement
AWARDS
Applied Design
Entrepreneurship
Hardware
Measurement
Model
Plant
Software
JUDGING FORM
Team:NUDT_CHINA

Model

Development of A Novel Blood-MicroRNA Handy Detection System with CRISPR