Difference between revisions of "Team:AHUT China"

Line 1: Line 1:
 
{{:Team:AHUT_China/CSS_reset}}
 
{{:Team:AHUT_China/CSS_reset}}
−
{{:Team:AHUT_China/CSS1}}
+
<!doctype html>
−
{{AHUT_China}}
+
<html lang="en">
−
<html>
+
<head>
−
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+
  <meta charset="UTF-8">
−
<meta http-equiv="X-UA-Compatible" content="IE=edge">
+
  <meta name="Generator" content="EditPlus®">
−
<meta charset="utf-8">
+
  <meta name="Author" content="">
−
<meta name="description" content="">
+
  <meta name="Keywords" content="">
−
<meta name="viewport" content="width=device-width, initial-scale=1.0">
+
  <meta name="Description" content="">
−
<link ref="https://2016.igem.org/Team:AHUT_China/CSS"
+
  <title>Document</title>
−
<link rel="stylesheet" href="https://2016.igem.org/Team:AHUT_China/CSS?action=raw&ctype=text/css" type="text/css" />
+
 
 
<style type="text/css">
 
<style type="text/css">
 +
*{margin：0px;padding:0px}
 +
body{margin:0px;}
 +
body{color:#898989;font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
 +
#nav{margin:0px auto;width:100%;}
  
−
body{
+
/*---------------------------------daohang------------------------------*/
 +
#menu{height:80px;width:100%;background-color:rgba(255,255,255,1.00);z-index:11;position:fixed;}
  
 +
.nav-menu {
 +
display: block;
 +
/* background: #74adaa;*/
 +
width:950px;
 +
margin: 50px auto 150px;
 
}
 
}
 +
.nav-menu > li {
 +
display: inline;
 +
float:left;
 +
border-right:1px solid #94c0be;
 +
}
 +
.nav-menu > li:last-child {
 +
border-right: none;
 +
}
 +
.nav-menu li a {
 +
color: #fff;
 +
display: block;
 +
text-decoration: none;
 +
/*调用本地字体*/
 +
font-family:sansationregular;
 +
-webkit-font-smoothing: antialiased;
 +
-moz-font-smoothing: antialiased;
 +
font-smoothing: antialiased;
 +
text-transform: capitalize;
 +
overflow: visible;
 +
line-height: 20px;
 +
font-size: 20px;
 +
padding: 15px 30px 15px 31px;
 +
}
 +
.three-d {
 +
/* 任务三、设置3D舞台布景 */
 +
-webkit-perspective: 200px;
 +
-moz-perspective: 200px;
 +
-ms-perspective: 200px;
 +
-o-perspective: 200px;
 +
perspective: 200px;
 +
          /*任务四、设置3D舞台布景过渡效果*/
 +
-webkit-transition: all .07s linear;
 +
-moz-transition: all .07s linear;
 +
-ms-transition: all .07s linear;
 +
-o-transition: all .07s linear;
 +
transition:all .7s linear;
 +
position: relative;
 +
}
 +
.three-d:not(.active):hover {
 +
cursor: pointer;
 +
}
 +
/*任务五、给不是当前状态的3D舞台的悬浮与聚焦状态设置变形效果*/
 +
.three-d:not(.active):hover .three-d-box,  .three-d:not(.active):focus .three-d-box {
 +
-wekbit-transform: translateZ(-25px) rotateX(90deg);
 +
-moz-transform: translateZ(-25px) rotateX(90deg);
 +
-o-transform: translateZ(-25px) rotateX(90deg);
 +
-ms-transform: translateZ(-25px) rotateX(90deg);
 +
transform: translateZ(-25px) rotateX(90deg);
 +
/*    -webkit-transform:rotateX(90deg) translatez(-25px);*/
 +
      /*  -webkit-transform:rotatex(90deg);*/
 +
}
 +
.three-d-box {
 +
          /*任务六、给3D舞台中“.three-d-box”设置过渡与变形效果*/
 +
-webkit-transition: all .3s ease-out;
 +
-moz-transition: all .3s ease-out;
 +
-ms-transition: all .3s ease-out;
 +
-o-transition: all .3s ease-out;
 +
transition: all .3s ease-out;
 +
-webkit-transform: translatez(-25px);
 +
-moz-transform: translatez(-25px);
 +
-ms-transform: translatez(-25px);
 +
-o-transform: translatez(-25px);
 +
transform: translatez(-25px);
 +
-webkit-transform-style: preserve-3d;
 +
-moz-transform-style: preserve-3d;
 +
-ms-transform-style: preserve-3d;
 +
-o-transform-style: preserve-3d;
 +
transform-style: preserve-3d;
 +
-webkit-pointer-events: none;
 +
-moz-pointer-events: none;
 +
-ms-pointer-events: none;
 +
-o-pointer-events: none;
 +
pointer-events: none;
 +
position: absolute;
 +
top: 0;
 +
left: 0;
 +
display: block;
 +
width: 100%;
 +
height: 100%;
 +
}
 +
/*任务七、给导航设置3D前，与3D后变形效果*/
 +
.front {
 +
-webkit-transform: rotatex(0deg) translatez(25px);
 +
-moz-transform: rotatex(0deg) translatez(25px);
 +
-ms-transform: rotatex(0deg) translatez(25px);
 +
-o-transform: rotatex(0deg) translatez(25px);
 +
transform: rotatex(0deg) translatez(25px);
 +
}
 +
.back {
 +
-webkit-transform: rotatex(-90deg) translatez(25px);
 +
-moz-transform: rotatex(-90deg) translatez(25px);
 +
-ms-transform: rotatex(-90deg) translatez(25px);
 +
-o-transform: rotatex(-90deg) translatez(25px);
 +
transform: rotatex(-90deg) translatez(25px);
 +
color: #FFE7C4;
 +
}
 +
.front, .back {
 +
/*          border:1px solid red;*/
 +
display: block;
 +
width: 100%;
 +
height: 100%;
 +
position: absolute;
 +
top: 0;
 +
left: 0;
 +
background: #74adaa;
 +
padding: 15px 30px 15px 31px;
 +
color: white;
 +
-webkit-pointer-events: none;
 +
-moz-pointer-events: none;
 +
-ms-pointer-events: none;
 +
-o-pointer-events: none;
 +
pointer-events: none;
 +
-webkit-box-sizing: border-box;
 +
box-sizing: border-box;
 +
}
 +
/*任务八、设置导航当前状态与悬浮状态下的背景效果*/
 +
.nav-menu li .active .front,  .nav-menu li .active .back,  .nav-menu li a:hover .front,  .nav-menu li a:hover .back {
 +
background-color: #51938f;
 +
-webkit-background-size: 5px 5px;
 +
background-size: 5px 5px;
 +
background-position: 0 0, 30px 30px;
 +
background-image: -webit-linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);
 +
background-image: -moz-linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);
 +
background-image: -ms-linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);
 +
background-image: -o-linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);
 +
background-image: linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480), linear-gradient(45deg, #478480 25%, transparent 25%, transparent 75%, #478480 75%, #478480);
 +
}
 +
.nav-menu ul {
 +
position: absolute;
 +
text-align: left;
 +
line-height: 40px;
 +
font-size: 14px;
 +
width: 200px;
 +
-webkit-transition: all 0.3s ease-in;
 +
-moz-transition: all 0.3s ease-in;
 +
-ms-transition: all 0.3s ease-in;
 +
-o-transition: all 0.3s ease-in;
 +
transition: all 0.3s ease-in;
 +
-webkit-transform-origin: 0px 0px;
 +
-moz-transform-origin: 0px 0px;
 +
-ms-transform-origin: 0px 0px;
 +
-o-transform-origin: 0px 0px;
 +
transform-origin: 0px 0px;
 +
-webkit-transform: rotateX(-90deg);
 +
-moz-transform: rotateX(-90deg);
 +
-ms-transform: rotateX(-90deg);
 +
-o-transform: rotateX(-90deg);
 +
transform: rotateX(-90deg);
 +
-webkit-backface-visibility: hidden;
 +
-moz-backface-visibility: hidden;
 +
-ms-backface-visibility: hidden;
 +
-o-backface-visibility: hidden;
 +
backface-visibility: hidden;
 +
}
 +
/*任务九、显示下拉导航菜单，并其设置一个变形效果*/
 +
.nav-menu > li:hover ul {
 +
-webkit-transform: rotateX(0deg);
 +
-moz-transform: rotateX(0deg);
 +
-ms-transform: rotateX(0deg);
 +
-o-transform: rotateX(0deg);
 +
transform: rotateX(0deg);
 +
}
 +
/*-------------------------------------------daohang_over---------------------------*/
 +
 +
#home a:hover{color:#ff3333;}
 +
#project a:hover{color:#ff3333;}
 +
#team a:hover{color:#ff3333;}
 +
#part a:hover{color:#ff3333;}
 +
#human a:hover{color:#ff3333;}
 +
#safe a:hover{color:#ff3333;}
 +
#note a:hover{color:#ff3333;}
 +
   
 +
a:hover{color:#ff3333;}
 +
 +
 +
#banner{height:800px;width:100%;background:#99ff33;}
 +
#banner {background:url(images/team/bannerBackGround.jpg) bottom left no-repeat; height=800px;
 +
background-position: center;}
 +
<link rel="stylesheet" type="text/css" href="css/style_1.css" />
 +
 +
 +
 +
 +
#menbers{height:80px;width:100%;background:#336633;}
 +
#menbers p{
 +
text-align:center;
 +
font-famliy:"Lucida Sans Unicode", "Lucida Grande";
 +
font-size:50px;
 +
color:#993300;
 +
line-height:80px;
 +
height:80px;
 +
 +
 +
 +
}
 +
 +
 +
 +
 +
#text_01{height:1000px;width:100%;background:#009999;}
 +
/*
 +
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
 +
.clearfix{display:inline-table;}/* Hides from IE-mac
 +
*html .clearfix{height:1%;}
 +
.clearfix{display:block;}/* End hide from IE-mac
 +
*+html .clearfix{min-height:1%;}
 +
/* lanrenzhijia
 +
.text_01{width:1250px;margin:10px auto 0 auto;overflow:hidden;}
 +
.text_01 ul{width:1250px;}
 +
.text_01 ul li{float:left;margin-right:6px;margin-bottom:10px;display:inline;width:300px;height:430px;overflow:hidden;position:relative;}
 +
.text_01 ul li .photo{width:300px;height:430px;overflow:hidden;}
 +
.text_01 .rsp{width:300px;height:430px;overflow:hidden;position: absolute;background:#000;top:0px;left:0px;}
 +
.text_01 .text{position:absolute;width:300px;height:430px;left:-300px;top:0px;overflow:hidden;}
 +
.text_01 .text h3{width:300px;margin-top:100px;height:50px;line-height:50px;text-align:center;color:#FFFFFF;font-size:20px;}
 +
.text_01 .text a{text-decoration:none}
 +
.text_01 .text div{text-align:center;color:#FFFFFF;font-size:18px;}
  
−
#title{  
+
/*
−
width:100%;
+
.text_01{ width:1120px; height:260px; margin:50px auto; padding:10px; box-shadow:0 0 10px #000;}
−
height:32px;
+
.text_01 .con{ width:1120px; height:260px;}
−
margin:20px auto;
+
.text_01 .con ul li{ width:46px; height:260px; position:relative; overflow:hidden; float:left;}
−
text-align:center;
+
.text_01.con ul li.current{ width:970px;}
 +
.text_01 .con ul li h3{ width:16px; height:230px; color:#fff; font-family:"微软雅黑"; font-size:16px; padding:15px; cursor:pointer;}
 +
.text_01 .con ul li.ti1 h3{ background:#C30;}
 +
.text_01 .con ul li.ti2 h3{ background:#F0F;}
 +
.text_01 .con ul li.ti3 h3{ background:#09F;}
 +
.text_01 .con ul li.ti4 h3{ background:#0F9;}
 +
.show{ position:absolute; left:46px; top:0; width:880px; height:200px; padding:30px 12px 30px 32px;}
 +
.show img{ width:200px; height:200px; margin-right:20px; box-shadow:0 0 10px #000; float:left;-webkit-animation:zq 2s infinite; animation:zq 2s infinite; border-radius:50%;}
 +
@keyframes zq{ from{transform:rotate(0deg);}
 +
to{transform:rotate(360deg);}
 
}
 
}
 +
@-webkit-keyframes zq{ from{-webkit-transform:rotate(0deg);}
 +
to{-webkit-transform:rotate(360deg);}
 +
} */
  
−
#title h{
+
.trans3d {-webkit-transform-style: preserve-3d; -webkit-transform: translate3d(0, 0, 0);-moz-transform-style: preserve-3d;-moz-transform: translate3d(0, 0, 0); -ms-transform-style:preserve-3d;-ms-transform: translate3d(0, 0, 0);transform-style:preserve-3d;
−
font-family:Times New Roman,Georgia,Serif;
+
transform: translate3d(0, 0, 0);/*-webkit-backface-visibility: hidden; -moz-backface-visibility: hidden;-ms-backface-visibility:hidden;backface-visibility:hidden;*/}
−
font-size:32px;
+
#contentContainer {position:absolute;margin-left:-500px;margin-top:-500px;left:50%;top:50%; width:1000px;height:1000px;}
−
font-weight:600;
+
#carouselContainer {position:absolute;margin-left:-500px;margin-top:-500px;left:50%;top:50%;width:1000px;height:1000px;}
−
color:#666666;
+
.carouselItem {width:320px; height:130px;position:absolute; left:50%;top:50%;margin-left:-160px;margin-top:-90px;visibility:hidden;}
 +
.carouselItemInner {width:320px;height:130px;position:absolute; background-color:rgba(255, 255, 255, .75); border:10px solid rgba(255, 255, 255, .5);color:aqua;font-size:72px;left:50%;top:50%;margin-left:-160px;margin-top:-90px;text-align:center;padding-top:50px;}
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
#instructions{height:80px;width:100%;background:#ff0000;}
 +
#text_02{height:1000px;width:100%;background:#6600ff;}
 +
#attributions{height:80px;width:100%;background:#99ffcc;}
 +
#text_03{height:1000px;width:100%;background:#ff0000;}
 +
#acknowledgement{height:80px;width:100%;background:#99ffcc;}
 +
#text_04{height:1000px;width:100%;background:#ff0000;}
 +
/*-------------------footer-----------------------*/
 +
 
 +
#footer{
 +
height:300px;
 +
width:100%;
 +
color:#ccc;
 +
font-size:12px;
 +
position:relative;
 +
z-index:3;
 +
background-color:#3c3e3f;
 
}
 
}
  
−
#section1{
+
#footer  .conent{
−
margin:0 auto;
+
width:960px;
−
width:100%;
+
−
text-align:center;
+
left:50%;
 +
bottom:0;
 +
margin-left:14%;
 +
z-index:2;
 
}
 
}
  
−
.p1{
+
#foot_list {
−
font-size:20px;
+
width:759px;
−
font-family: Times New Roman,Georgia,Serif;  
+
height:175px;
−
font-weight:500;
+
float:left;
−
text-align:Justify;
+
padding-top:5px;
−
word-spacing:0px;
+
margin:0;
−
letter-spacing: 0px;
+
}
−
text-indent:2em;
+
#foot_list  li{
−
color:#393939;
+
float:left;
−
line-height:25px
+
text-align:left;  
 +
width:115px;
 +
margin-left:0;
 +
margin-right:10px;
 +
    line-height:18px;
 +
    display:block;
 +
    color:#FFF;
 +
    font-size:16px;
 +
text-decoration: none;
 +
font-family:Arial, Helvetica, sans-serif;
 +
}
 +
#foot_list  li ul li:first-child {
 +
font-size:20px;
 +
color:#b4b4b4;
 +
line-height:28px;
 
}
 
}
  
−
#logo{
+
#foot_list  li ul li a {
−
width:100px;
+
font-size:12px;
−
height:100px;
+
color:#a1a1a1;
−
margin:20px auto;
+
line-height:18px;
 +
text-decoration:none;
 
}
 
}
−
</style>
 
  
−
<body>
+
#foot_list li ul li a:hover {
 +
color:#fff;
 +
transition: color 0.3s ease 0s;
 +
}
 +
 
 +
 
 +
#foot_igem{
 +
padding:38px 33px 24px 18px;
 +
float:right;
 +
}
 +
#foot_igem > a {
 +
width:150px;
 +
height:118px;
 +
display:block;
 +
background-image:url(https://static.igem.org/mediawiki/2016/8/87/AHUT_CHINA_2015_index_igem_gray.jpg);
 +
}
 +
#foot_igem > a:hover {
 +
background-image:url(https://static.igem.org/mediawiki/2016/d/d8/AHUT_CHINA_2015_index_igem_origin.jpg);
 +
}
 +
#foot_copyright {
 +
clear:both;
 +
width:960px;
 +
line-height:36px;
 +
text-align:center;
 +
vertical-align:middle;
 +
color:#777777;
 +
font-size:12px;
 +
font-family:Arial, Helvetica, sans-serif;
 +
}
 +
 
 +
 
 +
 
 +
 
 +
 
 +
</style>
 +
</head>
 +
<body>
 +
 
  
−
<div id="section">
+
<div id="nav">
−
<div id="title">
+
<!---------------------------------------------------------------------------->
−
<h>
+
<div id="menu">
−
  WELCOME TO AHUT-CHINA 2016
+
  <ul class="nav-menu clearfix unstyled">
−
</h>
+
 +
    <li><a href="AHUT_China_main.html" class="three-d active"> Home <span class="three-d-box"><span class="front">Home</span><span class="back">Home</span></span> </a></li>
 +
 +
    <li><a href="AHUT_China_team.html" class="three-d">Team <span class="three-d-box"><span class="front"> Team</span><span class="back"> Team</span></span> </a>
 +
<ul class="clearfix unstyled drop-menu">
 +
        <li><a href="#" class="three-d"> Html5 <span class="three-d-box"><span class="front">Html5</span><span class="back">Html5</span></span> </a></li>
 +
        <li><a href="#" class="three-d"> Css3 <span class="three-d-box"><span class="front">Css3</span><span class="back">Css3</span></span> </a></li>
 +
        <li><a href="#" class="three-d"> JavaScript <span class="three-d-box"><span class="front">JavaScript</span><span class="back">JavaScript</span></span> </a></li>
 +
</ul>
 +
    <li><a href="AHUT_China_project.html" class="three-d">  Project <span class="three-d-box"><span class="front"> Project</span><span class="back"> Project</span></span> </a></li>
 +
    <li><a href="AHUT_China_parts.html" class="three-d"> Parts <span class="three-d-box"><span class="front"> Parts</span><span class="back"> Parts</span></span> </a></li>
 +
    <li><a href="AHUT_China_humanpractices.html" class="three-d"> Human Practices <span class="three-d-box"><span class="front">Human Practices</span><span class="back">Human Practices</span></span> </a></li>
 +
    <li><a href="#" class="three-d"> Safety <span class="three-d-box"><span class="front">Safety</span><span class="back">Safety</span></span></a>
 +
      <ul class="clearfix unstyled drop-menu">
 +
        <li><a href="#" class="three-d"> Html5 <span class="three-d-box"><span class="front">Html5</span><span class="back">Html5</span></span> </a></li>
 +
        <li><a href="#" class="three-d"> Css3 <span class="three-d-box"><span class="front">Css3</span><span class="back">Css3</span></span> </a></li>
 +
        <li><a href="#" class="three-d"> JavaScript <span class="three-d-box"><span class="front">JavaScript</span><span class="back">JavaScript</span></span> </a></li>
 +
        <li><a href="#" class="three-d"> Videogames <span class="three-d-box"><span class="front">Videogames</span><span class="back">Videogames</span></span> </a></li>
 +
      </ul>
 +
    </li>
 +
    <li><a href="AHUT_China_notebook.html" class="three-d">NoteBook <span class="three-d-box"><span class="front">NoteBook</span><span class="back">NoteBook</span></span> </a></li>
 +
  </ul>
 
</div>
 
</div>
  
−
<div id="logo">
+
<!--------------------------------------------------------------------------->
−
<img width="100px" height="100px" src="https://static.igem.org/mediawiki/2016/a/a9/AHUT-LOGO.jpg">
+
<div id="banner">  
 +
 +
<script src='js/delaunay_1.js'></script>
 +
<script src='js/TweenMax_1.js'></script>
 +
<script>
 +
const TWO_PI = Math.PI * 2;
 +
var images = [],
 +
    imageIndex = 0;
 +
 
 +
var image,
 +
    imageWidth = 768,
 +
    imageHeight = 485;
 +
 +
var vertices = [],
 +
    indices = [],
 +
    prevfrag = [],
 +
    fragments = [];
 +
 
 +
var margin = 50;
 +
 
 +
var container = document.getElementById('container');
 +
 
 +
var clickPosition = [imageWidth * 0.5, imageHeight * 0.5];
 +
 
 +
window.onload = function() {
 +
    TweenMax.set(container, {perspective:500});
 +
    var urls = [
 +
            'images/1.jpg',
 +
            'images/2.jpg',
 +
            'images/3.jpg',
 +
            'images/4.jpg'
 +
        ],
 +
        image,
 +
        loaded = 0;
 +
    images[0] = image = new Image();
 +
        image.onload = function() {
 +
            if (++loaded === 1) {
 +
               
 +
                for (var i = 1; i < urls.length; i++) {
 +
                    images[i] = image = new Image();
 +
 
 +
                    image.src = urls[i];
 +
                }
 +
                placeImage();
 +
            }
 +
        };
 +
        image.src = urls[0];
 +
};
 +
 
 +
function placeImage(transitionIn) {
 +
    image = images[imageIndex];
 +
 
 +
    if (++imageIndex === images.length) imageIndex = 0;
 +
 
 +
    var num = Math.random();
 +
    if(num < .25) {
 +
      image.direction = "left";
 +
    } else if(num < .5) {
 +
      image.direction = "top";
 +
    } else if(num < .75) {
 +
      image.direction = "bottom";
 +
    } else {
 +
      image.direction = "right";
 +
    }
 +
 
 +
    container.appendChild(image);
 +
    image.style.opacity = 0;
 +
 
 +
    if (transitionIn !== false) {
 +
        triangulateIn();
 +
    }
 +
}
 +
 
 +
function triangulateIn(event) {
 +
    var box = image.getBoundingClientRect(),
 +
        top = box.top,
 +
        left = box.left;
 +
 
 +
    if(image.direction == "left") {
 +
      clickPosition[0] = 0;
 +
      clickPosition[1] = imageHeight / 2;
 +
    } else if(image.direction == "top") {
 +
      clickPosition[0] = imageWidth / 2;
 +
      clickPosition[1] = 0;
 +
    } else if(image.direction == "bottom") {
 +
      clickPosition[0] = imageWidth / 2;
 +
      clickPosition[1] = imageHeight;
 +
    } else if(image.direction == "right") {
 +
      clickPosition[0] = imageWidth;
 +
      clickPosition[1] = imageHeight / 2;
 +
    }
 +
   
 +
 
 +
    triangulate();
 +
    build();
 +
}
 +
 
 +
function triangulate() {
 +
    for(var i = 0; i < 40; i++) {     
 +
      x = -margin + Math.random() * (imageWidth + margin * 2);
 +
      y = -margin + Math.random() * (imageHeight + margin * 2);
 +
      vertices.push([x, y]);
 +
    }
 +
    vertices.push([0,0]);
 +
    vertices.push([imageWidth,0]);
 +
    vertices.push([imageWidth, imageHeight]);
 +
    vertices.push([0, imageHeight]);
 +
 
 +
    vertices.forEach(function(v) {
 +
        v[0] = clamp(v[0], 0, imageWidth);
 +
        v[1] = clamp(v[1], 0, imageHeight);
 +
    });
 +
 
 +
    indices = Delaunay.triangulate(vertices);
 +
}
 +
 
 +
function build() {
 +
    var p0, p1, p2,
 +
        fragment;
 +
 
 +
    var tl0 = new TimelineMax({onComplete:buildCompleteHandler});
 +
 
 +
    for (var i = 0; i < indices.length; i += 3) {
 +
        p0 = vertices[indices[i + 0]];
 +
        p1 = vertices[indices[i + 1]];
 +
        p2 = vertices[indices[i + 2]];
 +
 
 +
        fragment = new Fragment(p0, p1, p2);
 +
 
 +
        var dx = fragment.centroid[0] - clickPosition[0],
 +
            dy = fragment.centroid[1] - clickPosition[1],
 +
            d = Math.sqrt(dx * dx + dy * dy),
 +
            rx = 30 * sign(dy),
 +
            ry = 90 * -sign(dx),
 +
            delay = d * 0.003 * randomRange(0.9, 1.1);
 +
        fragment.canvas.style.zIndex = Math.floor(d).toString();
 +
 
 +
        var tl1 = new TimelineMax();
 +
 
 +
        if(image.direction == "left") {
 +
          rx = Math.abs(rx);
 +
          ry = 0;         
 +
        } else if(image.direction == "top") {
 +
          rx = 0;
 +
          ry = Math.abs(ry);
 +
        } else if(image.direction == "bottom") {
 +
          rx = 0;
 +
          ry = - Math.abs(ry);
 +
        } else if(image.direction == "right") {
 +
          rx = - Math.abs(rx);
 +
          ry = 0;
 +
        }
 +
       
 +
        tl1.from(fragment.canvas, 1, {
 +
              z:-50,
 +
              rotationX:rx,
 +
              rotationY:ry,
 +
              scaleX:0,
 +
              scaleY:0,
 +
              ease:Cubic.easeIn
 +
        });
 +
        tl1.from(fragment.canvas, 0.4,{alpha:0}, 0.6);
 +
     
 +
        tl0.insert(tl1, delay);
 +
 
 +
        fragments.push(fragment);
 +
        container.appendChild(fragment.canvas);
 +
    }
 +
}
 +
 
 +
function buildCompleteHandler() {
 +
    // add pooling?
 +
    image.style.opacity = 1;
 +
    image.addEventListener('transitionend', function catchTrans() {
 +
      fragments.forEach(function(f) {
 +
          container.removeChild(f.canvas);
 +
      });
 +
 
 +
      fragments.length = 0;
 +
      vertices.length = 0;
 +
      indices.length = 0;
 +
 
 +
      placeImage();
 +
      this.removeEventListener('transitionend',catchTrans,false);
 +
    }, false);
 +
   
 +
}
 +
 
 +
//////////////
 +
// MATH UTILS
 +
//////////////
 +
 
 +
function randomRange(min, max) {
 +
    return min + (max - min) * Math.random();
 +
}
 +
 
 +
function clamp(x, min, max) {
 +
    return x < min ? min : (x > max ? max : x);
 +
}
 +
 
 +
function sign(x) {
 +
    return x < 0 ? -1 : 1;
 +
}
 +
 
 +
//////////////
 +
// FRAGMENT
 +
//////////////
 +
 
 +
Fragment = function(v0, v1, v2) {
 +
    this.v0 = v0;
 +
    this.v1 = v1;
 +
    this.v2 = v2;
 +
 
 +
    this.computeBoundingBox();
 +
    this.computeCentroid();
 +
    this.createCanvas();
 +
    this.clip();
 +
};
 +
Fragment.prototype = {
 +
    computeBoundingBox:function() {
 +
        var xMin = Math.min(this.v0[0], this.v1[0], this.v2[0]),
 +
            xMax = Math.max(this.v0[0], this.v1[0], this.v2[0]),
 +
            yMin = Math.min(this.v0[1], this.v1[1], this.v2[1]),
 +
            yMax = Math.max(this.v0[1], this.v1[1], this.v2[1]);
 +
 
 +
        this.box = {
 +
            x:Math.round(xMin),
 +
            y:Math.round(yMin),
 +
            w:Math.round(xMax - xMin),
 +
            h:Math.round(yMax - yMin)
 +
        };
 +
 
 +
    },
 +
    computeCentroid:function() {
 +
        var x = (this.v0[0] + this.v1[0] + this.v2[0]) / 3,
 +
            y = (this.v0[1] + this.v1[1] + this.v2[1]) / 3;
 +
 
 +
        this.centroid = [x, y];
 +
    },
 +
    createCanvas:function() {
 +
        this.canvas = document.createElement('canvas');
 +
        this.canvas.width = this.box.w;
 +
        this.canvas.height = this.box.h;
 +
        this.canvas.style.width = this.box.w + 'px';
 +
        this.canvas.style.height = this.box.h + 'px';
 +
        this.canvas.style.left = this.box.x + 'px';
 +
        this.canvas.style.top = this.box.y + 'px';
 +
        this.ctx = this.canvas.getContext('2d');
 +
    },
 +
    clip:function() {
 +
        this.ctx.save();
 +
        this.ctx.translate(-this.box.x, -this.box.y);
 +
        this.ctx.beginPath();
 +
        this.ctx.moveTo(this.v0[0], this.v0[1]);
 +
        this.ctx.lineTo(this.v1[0], this.v1[1]);
 +
        this.ctx.lineTo(this.v2[0], this.v2[1]);
 +
        this.ctx.closePath();
 +
        this.ctx.clip();
 +
        this.ctx.drawImage(image, 0, 0);
 +
        this.ctx.restore();
 +
    }
 +
};
 +
</script>
 +
 
 +
</div>
 +
 
 +
 
 +
<div id="menbers">
 +
 +
</div>
 +
 
 +
<div id="text_01">
 +
<!--图片效果-->
 +
<ul>
 +
<div id="contentContainer" class="trans3d">
 +
<section id="carouselContainer" class="trans3d">
 +
<!--figure id="item1" class="carouselItem trans3d"><div class="carouselItemInner trans3d" style="background-image:url(http://demo.lanrenzhijia.com/2014/3d1011/images/a1.jpg)">1</div></figure-->
 +
<!--figure id="item2" class="carouselItem trans3d"><div class="carouselItemInner trans3d" style="background-image:url(http://demo.lanrenzhijia.com/2014/3d1011/images/a2.jpg)">2</div></figure-->
 +
<figure id="item3" class="carouselItem trans3d"><div class="carouselItemInner trans3d" style="background-image:url(http://demo.lanrenzhijia.com/2014/3d1011/images/a3.jpg)">3</div></figure>
 +
<figure id="item4" class="carouselItem trans3d"><div class="carouselItemInner trans3d" style="background-image:url(http://demo.lanrenzhijia.com/2014/3d1011/images/a4.jpg)">4</div></figure>
 +
<figure id="item5" class="carouselItem trans3d"><div class="carouselItemInner trans3d" style="background-image:url(http://demo.lanrenzhijia.com/2014/3d1011/images/a5.jpg)">5</div></figure>
 +
<figure id="item6" class="carouselItem trans3d"><div class="carouselItemInner trans3d" style="background-image:url(http://demo.lanrenzhijia.com/2014/3d1011/images/a6.jpg)">6</div></figure>
 +
<figure id="item7" class="carouselItem trans3d"><div class="carouselItemInner trans3d" style="background-image:url(http://demo.lanrenzhijia.com/2014/3d1011/images/a7.jpg)">7</div></figure>
 +
<figure id="item8" class="carouselItem trans3d"><div class="carouselItemInner trans3d" style="background-image:url(http://demo.lanrenzhijia.com/2014/3d1011/images/a1.jpg)">8</div></figure>
 +
<!--figure id="item9" class="carouselItem trans3d"><div class="carouselItemInner trans3d" style="background-image:url(http://demo.lanrenzhijia.com/2014/3d1011/images/a2.jpg)">9</div></figure-->
 +
<figure id="item10" class="carouselItem trans3d"><div class="carouselItemInner trans3d" style="background-image:url(http://demo.lanrenzhijia.com/2014/3d1011/images/a3.jpg)">10</div></figure>
 +
<figure id="item11" class="carouselItem trans3d"><div class="carouselItemInner trans3d" style="background-image:url(http://demo.lanrenzhijia.com/2014/3d1011/images/a4.jpg)">11</div></figure>
 +
<figure id="item12" class="carouselItem trans3d"><div class="carouselItemInner trans3d" style="background-image:url(http://demo.lanrenzhijia.com/2014/3d1011/images/a5.jpg)">12</div></figure>
 +
</section>
 +
</div>
 +
<script src='js/libs.min.js'></script>
 +
<script src="js/lanrenzhijia01.js"></script>
 +
<!--------->
 +
</ul>
 
</div>
 
</div>
  
−
<div id="section1">
+
 
−
<p class="p1">  
+
 
−
Our team has chosen to continue our 2014 project of BIO-COMPASS after discussing its meaning and feasibility as well as comparing with other projects. Firstly, we firmly believe that the project of 2014 was quite potential and could be further researched and developed so as to bring more real benefits to human beings. Besides, our initial plan of using paclitaxel to cure diseases like cancer is not practical enough， thus needs to be further improved. Finally, our team is always ready for delving into a wonderful subject and pursuing the better or perfection, and continuing our 2014 project of BIO-COMPASS serves as a great option to achieve this purpose.</br>
+
 
−
Our project aims to build a new available bio-navigational system in which the map information will be coded in DNA strands with correlative biochemical reactions. The bio-navigational database builds up the relationship between biochemical operation instructions and traditional navigation instructions. In order to improve work efficiency, BIO-COMPASS 2.0 is designed to screen out and optimize the conditions of reaction according to road conditional filtering. Therefore, we attempt to renew the system based on our project in 2014 to adapt to the more complex path plans. As for this point, based on our previous pathway planning which includes design of sites and lines, we have further conducted deeper coding to lines. Also, the lines are used not only to complement corresponding nodes, but also encompass the information of length, node and specific identification. Through BIO-COMPASS 2.0, the shortest way to achieve the purpose of navigation will be obtained by using a variety of detection methods (such as electrophoresis , sequencing, etc).  
+
 
−
</p>
+
</div>
 +
 
 +
<div id="footer">
 +
  <div class="conent">
 +
    <!--<div id="im_logo_link">
 +
      <ul>
 +
        <li id="twitter"><a href=""></a></li>
 +
        <li id="youtube"><a href=""></a></li>
 +
        <li id="webchat"><a href=""></a></li>
 +
        <li id="qq"><a href=""></a></li>
 +
      </ul>
 +
    </div>
 +
    <div style="height:1px;">
 +
      <img src="https://static.igem.org/mediawiki/2015/f/fe/AHUT_CHINA_2015_index_foot_line_white.jpg" width="960" height="1" alt=""/>
 +
    </div>-->
 +
    <ul id="foot_list">
 +
      <li id="team">
 +
        <ul>
 +
          <li>TEAM</li>
 +
          <li><a href="https://2015.igem.org/Team:AHUT_China/team#Members">Members</a></li>
 +
          <li><a href="https://2015.igem.org/Team:AHUT_China/team#Instructors">Instructors</a></li>
 +
          <li><a href="https://2015.igem.org/Team:AHUT_China/team#Attributions">Attributions</a></li>
 +
          <li><a href="https://2015.igem.org/Team:AHUT_China/team#Acknowledgement">Acknowledgement</a></li>
 +
        </ul>
 +
      </li>
 +
      <li id="project">
 +
        <ul>
 +
          <li>PROJECT</li>
 +
          <li><a href="https://2015.igem.org/Team:AHUT_China/project#Pathway and Design">Pathway and Design</a></li>
 +
          <li><a href="https://2015.igem.org/Team:AHUT_China/project#Result">Result</a></li>
 +
          <li><a href="https://2015.igem.org/Team:AHUT_China/project#Future">Future Work</a></li>
 +
        </ul>
 +
      </li>
 +
      <li id="parts">
 +
        <ul>
 +
          <li>PARTS</li>
 +
          <li><a href="https://2015.igem.org/Team:AHUT_China/parts#Biobrick">Biobrick</a></li>
 +
          <li><a href="https://2015.igem.org/Team:AHUT_China/parts#Protools">Protools</a></li>
 +
        </ul>
 +
      </li>
 +
      <li id="human_p">
 +
        <ul>
 +
          <li>HUMAN <br>PRACTICES</li>
 +
          <li><a href="https://2015.igem.org/Team:AHUT_China/Practices#Society">Society</a></li>
 +
          <li><a href="https://2015.igem.org/Team:AHUT_China/Practices#NewPower">New Power</a></li>
 +
          <li><a href="https://2015.igem.org/Team:AHUT_China/Practices#Questionnaire">Questionnaire</a></li>
 +
          <li><a href="https://2015.igem.org/Team:AHUT_China/Practices#MOOC">MOOC</a></li>
 +
          <li><a href="https://2015.igem.org/Team:AHUT_China/Practices#Art">Art</a></li>
 +
        </ul>
 +
      </li>
 +
      <li id="safety">
 +
        <ul>
 +
          <li>SAFETY</li>
 +
          <li><a href="https://2015.igem.org/Team:AHUT_China/Safety">Safety</a></li>
 +
        </ul>
 +
      </li>
 +
      <li id="notebook">
 +
        <ul>
 +
          <li>NOTEBOOK</li>
 +
          <li><a href="https://2015.igem.org/Team:AHUT_China/notebook#Notebook">Notebook</a></li>
 +
          <li><a href="https://2015.igem.org/Team:AHUT_China/notebook#Lab Pictures">Lab Pictures</a></li>
 +
        </ul>
 +
      </li>
 +
    </ul>
 +
    <div id="foot_igem">
 +
      <a href="https://2016.igem.org/Main_Page"></a>
 +
    </div>
 +
    <div style="clear:both;">
 +
      <img src="./Team_AHUT China_team - 2015.igem.org_files/AHUT_CHINA_2015_index_foot_line_gray.jpg" width="960" height="3" alt="">
 +
    </div>
 +
    <p id="foot_copyright">Copyright 2016 © AHUT iGEM Team , All rights reserved . </p>
 +
  </div>
 
</div>
 
</div>
  
 +
<p></p>
 +
</div> <div class="visualClear"></div>
 +
    </div>
 +
</div>
 +
    </div>
 +
 +
<!----------------------------------------------------------------------------------------------->
 
</div>
 
</div>
  
−
</body>
+
 
 +
 
 +
</body>
 
</html>
 
</html>

Revision as of 05:54, 29 September 2016

<!doctype html> Document