Team:XMU-China

From 2014.igem.org

(Difference between revisions)
 
(40 intermediate revisions not shown)
Line 39: Line 39:
<body>
<body>
-
<div id="background" style="position:absolute;z-index:-1;width:100%;height:100%;top:0px;left:0px;">
+
<div id="background" style="position:fixed;z-index:-1;width:100%;height:100%;top:0px;left:0px;">
-
<img src="https://static.igem.org/mediawiki/2014/0/06/XMU-home-background.jpg" width="100%" height="100%"/>
+
<img src="https://static.igem.org/mediawiki/2014/5/55/Xmu_background_drei.jpg" width="100%" height="100%"/>
</div>
</div>
-
<div id="pic" style="position:absolute;">
+
<div style="width:1000px;margin:0px auto">
-
<img src="https://static.igem.org/mediawiki/2014/a/a6/XMU-snow_3.gif" />
+
<div id="topic">
 +
<img src="https://static.igem.org/mediawiki/2014/0/03/Xmu_home_head_drei.png" width="572px" height="210px" style="position:relative; left:-268px; margin-left:50%;"/>
</div>
</div>
-
<div id="icon" style="position:absolute;"  >
 
-
<a href="https://2014.igem.org/Team:XMU-China/p&p"><img src="https://static.igem.org/mediawiki/2014/6/6e/XMU-icon_1.png" class="icon" style="position:fixed; left: 150px; top: 390px;" width="100px;" height="100px;" /></a>
 
-
<a href="https://2014.igem.org/Team:XMU-China/judging"><img src="https://static.igem.org/mediawiki/2014/3/36/XMU-icon_2.png" class="icon" style="position:fixed; left: 70px; top: 345px;" width="100px;" height="100px;" /></a>
 
-
<a href="https://2014.igem.org/Team:XMU-China/safety"><img src="https://static.igem.org/mediawiki/2014/b/be/XMU-icon_3.png" class="icon" style="position:fixed; left: 150px; top: 300px;" width="100px;" height="100px;" /></a>
 
-
<a href="https://2014.igem.org/Team:XMU-China/notebook"><img src="https://static.igem.org/mediawiki/2014/c/c2/XMU-icon_4.png" class="icon" style="position:fixed; left: 820px; top: 225px;" width="100px;" height="100px;" /></a>
 
-
<a href="https://2014.igem.org/Team:XMU-China/team"><img src="https://static.igem.org/mediawiki/2014/4/48/XMU-icon_5.png" class="icon" style="position:fixed; left: 740px; top: 270px;" width="100px;" height="100px;" /></a>
 
-
<a href="https://2014.igem.org/Team:XMU-China/project"><img src="https://static.igem.org/mediawiki/2014/0/00/XMU-icon_6.png" class="icon" style="position:fixed; left: 740px; top: 180px;" width="100px;" height="100px;" /></a>
 
</div>
</div>
-
<style>
+
<div id="background" style="position:fixed;z-index:-1;right:0px;bottom:0px;">
 +
<a href="https://igem.org/Team.cgi?id=1412"> <img src="https://static.igem.org/mediawiki/2014/8/8f/Xmu_home_product.png" width="80%" /> </a>
 +
</div>
 +
<div id="background" style="position:fixed;z-index:2;left:5px;top:5px;">
 +
<a href="https://2014.igem.org/"> <img src="https://static.igem.org/mediawiki/2014/f/fb/XMU-2014igem.png" width="50%" /> </a>
 +
</div>
 +
<div id="pic" style="width:510px;  margin:auto; top: 220px;">
 +
<img id="abstract" src="https://static.igem.org/mediawiki/2014/2/20/XMU-Abstract-English2.png" onmouseover="movein()" style="position:absolute;"/>
 +
</div>
 +
<div id="flag"  style="position:fixed;z-index:2;right:10px;top:5px;">
 +
<img id="flag_1"  src="https://static.igem.org/mediawiki/2014/5/55/XMU-China.png" style="cursor:pointer" />
 +
<img id="flag_2"  src="https://static.igem.org/mediawiki/2014/d/d7/XMU-England.png" style="cursor:pointer"  />
 +
<img id="flag_3"  src="https://static.igem.org/mediawiki/2014/1/14/XMU-France.png" style="cursor:pointer"  />
 +
<img id="flag_4"  src="https://static.igem.org/mediawiki/2014/0/0e/XMU-Germany.png" style="cursor:pointer"  />
 +
</div>
 +
 +
<script type="text/javascript">
 +
$(document).ready(function(){
 +
$("#flag_1").click(function(){
 +
$("#abstract").attr("src","https://static.igem.org/mediawiki/2014/9/9b/XMU-Abstract-Chinese.png");
 +
});
 +
$("#flag_2").click(function(){
 +
$("#abstract").attr("src","https://static.igem.org/mediawiki/2014/2/20/XMU-Abstract-English2.png");
 +
});
 +
$("#flag_3").click(function(){
 +
$("#abstract").attr("src","https://static.igem.org/mediawiki/2014/3/3f/XMU-Abstract-French.png");
 +
});
 +
$("#flag_4").click(function(){
 +
$("#abstract").attr("src","https://static.igem.org/mediawiki/2014/6/6a/XMU-Abstract-German.png");
 +
});
 +
});
 +
</script>
 +
 +
 +
<div style="width:1000px;margin:0px auto">
 +
<div id="icon" style="position:relative;top:-150px">
 +
<a href="https://2014.igem.org/Team:XMU-China/PP_Overview"><img src="https://static.igem.org/mediawiki/2014/5/5d/XMU-Home-icon-pp.png" id="icon1" class="icon" style="position:absolute; left: 50px; top: 320px;" width="200px;" height="200px;" onmouseover="moveout_1(this)" /></a>
 +
<a href="https://2014.igem.org/Team:XMU-China/Judging_Parts"><img src="https://static.igem.org/mediawiki/2014/4/4c/XMU-Home-icon-j.png" id="icon2" class="icon" style="position:absolute; left: -100px; top: 235px;" width="200px;" height="200px;" onmouseover="moveout_2(this)" /></a>
 +
<a href="https://2014.igem.org/Team:XMU-China/Safety"><img src="https://static.igem.org/mediawiki/2014/9/9c/XMU-Home-icon-safety.png" id="icon3" class="icon" style="position:absolute; left: 50px; top: 150px;" width="200px;" height="200px;" onmouseover="moveout_3(this)" /></a>
 +
<a href="https://2014.igem.org/Team:XMU-China/Notebook_Protocol"><img src="https://static.igem.org/mediawiki/2014/c/c2/XMU-icon_4.png" id="icon4" class="icon" style="position:absolute; left: 890px; top: 235px;" width="200px;" height="200px;"  onmouseover="moveout_4(this)" /></a>
 +
<a href="https://2014.igem.org/Team:XMU-China/Team_Members"><img src="https://static.igem.org/mediawiki/2014/4/48/XMU-icon_5.png" id="icon5" class="icon" style="position:absolute; left: 740px; top: 320px;" width="200px;" height="200px;" onmouseover="moveout_5(this)" /></a>
 +
<a href="https://2014.igem.org/Team:XMU-China/Project_Background"><img src="https://static.igem.org/mediawiki/2014/0/00/XMU-icon_6.png" id="icon6" class="icon" style="position:absolute; left: 740px; top: 150px;" width="200px;" height="200px;" onmouseover="moveout_6(this)" /></a>
 +
<a href="https://2014.igem.org/Team:XMU-China/PP_Overview"><img src="https://static.igem.org/mediawiki/2014/3/3f/XMU-Home-turn-pp.png" id="turn1" class="turn" style="position:absolute; left: 50px; top: 320px; z-index:1" width="200px;" height="200px;" /></a>
 +
<a href="https://2014.igem.org/Team:XMU-China/Judging_Parts"><img src="https://static.igem.org/mediawiki/2014/3/38/XMU-Home-turn-j.png" id="turn2" class="turn" style="position:absolute; left: -100px; top: 235px; z-index:1" width="200px;" height="200px;" /></a>
 +
<a href="https://2014.igem.org/Team:XMU-China/Safety"><img src="https://static.igem.org/mediawiki/2014/9/90/XMU-Home-turn-safety.png" id="turn3" class="turn" style="position:absolute; left: 50px; top: 150px; z-index:1" width="200px;" height="200px;"  /></a>
 +
<a href="https://2014.igem.org/Team:XMU-China/Notebook_Protocol"><img src="https://static.igem.org/mediawiki/2014/5/54/XMU-Turn_4.png" id="turn4" class="turn" style="position:absolute; left: 890px; top: 235px; z-index:1" width="200px;" height="200px;"  /></a>
 +
<a href="https://2014.igem.org/Team:XMU-China/Team_Members"><img src="https://static.igem.org/mediawiki/2014/4/4d/XMU-Turn_5.png" id="turn5" class="turn" style="position:absolute; left: 740px; top: 320px; z-index:1" width="200px;" height="200px;" /></a>
 +
<a href="https://2014.igem.org/Team:XMU-China/Project_Background"><img src="https://static.igem.org/mediawiki/2014/b/b7/XMU-Turn_6.png" id="turn6" class="turn" style="position:absolute; left: 740px; top: 150px; z-index:1" width="200px;" height="200px;"  /></a>
 +
</div>
 +
</div>
 +
 
 +
<style type="text/css">
#pic{left: 250px; top: 160px;}
#pic{left: 250px; top: 160px;}
 +
.wys.icon{width: 100px; height: 100px;}
</style>
</style>
<style type="text/css">
<style type="text/css">
-
  .icon {
+
  #homepage {
-
    transition: all 0.1s linear;
+
perspective:800;
-
    -ms-transition: all 0.2s linear;
+
perspective-0rigin: 50% 50%;
-
-moz-transition: all 0.1s linear; /* Firefox 4 */
+
overflow: hidden;
-
        -webkit-transition: all 0.2s linear; /* Safari and Chrome */
+
-
        -o-transition: all 0.2s linear; /* Opera */
+
  }
  }
-
  .icon:hover {
+
-
    transform:scaleY(0);
+
  #icon {
-
    -ms-transform:scaleY(-1);
+
transform-style: preserve-3d;
-
        -moz-transform:scaleY(-1); /* Firefox 4 */
+
-
        -webkit-transform:scaleY(-1); /* Safari and Chrome */
+
-
        -o-transform:scaleY(0=1); /* Opera */
+
  }
  }
 +
 +
  .icon{
 +
 +
transform-origin:center;
 +
-webkit-transform-origin:center;
 +
transition: all 0.2s linear;
 +
-ms-transition: all 0.2s linear;
 +
-moz-transition: all 0.2s linear; /* Firefox 4 */
 +
-webkit-transition: all 0.2s linear; /* Safari and Chrome */
 +
-o-transition: all 0.2s linear; /* Opera */
 +
}
 +
 +
  .turn {
 +
transform-origin:center;
 +
-webkit-transform-origin:center;
 +
transition: all 0.2s linear;
 +
-ms-transition: all 0.2s linear;
 +
-moz-transition: all 0.2s linear; /* Firefox 4 */
 +
-webkit-transition: all 0.2s linear; /* Safari and Chrome */
 +
-o-transition: all 0.2s linear; /* Opera */
 +
   
 +
transform:rotateX(90deg);
 +
-ms-transform:rotateX(90deg);
 +
-moz-transform:rotateX(90deg); /* Firefox 4 */
 +
-webkit-transform:rotateX(90deg); /* Safari and Chrome */
 +
-o-transform:rotateX(90deg); /* Opera */
 +
  }
 +
</style>
</style>
 +
 +
<script>
 +
function moveout_1(obj) {
 +
obj.style.transform="rotateX(-90deg)";
 +
obj.style.webkitTransform="rotateX(-90deg)";
 +
    var next = document.getElementById("turn1");
 +
next.style.transform="rotateX(0deg)";
 +
next.style.webkitTransform="rotateX(0deg)";
 +
 +
}
 +
 +
 +
function moveout_2(obj) {
 +
obj.style.transform="rotateX(-90deg)";
 +
obj.style.webkitTransform="rotateX(-90deg)";
 +
    var next = document.getElementById("turn2");
 +
next.style.transform="rotateX(0deg)";
 +
next.style.webkitTransform="rotateX(0deg)";
 +
 +
}
 +
 +
 +
function moveout_3(obj) {
 +
obj.style.transform="rotateX(-90deg)";
 +
obj.style.webkitTransform="rotateX(-90deg)";
 +
    var next = document.getElementById("turn3");
 +
next.style.transform="rotateX(0deg)";
 +
next.style.webkitTransform="rotateX(0deg)";
 +
 +
}
 +
 +
 +
function moveout_4(obj) {
 +
obj.style.transform="rotateX(-90deg)";
 +
obj.style.webkitTransform="rotateX(-90deg)";
 +
    var next = document.getElementById("turn4");
 +
next.style.transform="rotateX(0deg)";
 +
next.style.webkitTransform="rotateX(0deg)";
 +
 +
}
 +
 +
 +
function moveout_5(obj) {
 +
obj.style.transform="rotateX(-90deg)";
 +
obj.style.webkitTransform="rotateX(-90deg)";
 +
    var next = document.getElementById("turn5");
 +
next.style.transform="rotateX(0deg)";
 +
next.style.webkitTransform="rotateX(0deg)";
 +
 +
}
 +
 +
 +
function moveout_6(obj) {
 +
obj.style.transform="rotateX(-90deg)";
 +
obj.style.webkitTransform="rotateX(-90deg)";
 +
    var next = document.getElementById("turn6");
 +
next.style.transform="rotateX(0deg)";
 +
next.style.webkitTransform="rotateX(0deg)";
 +
 +
}
 +
function movein(obj) {
 +
    var prev = document.getElementById("turn1");
 +
prev.style.transform="rotateX(90deg)";
 +
prev.style.webkitTransform="rotateX(90deg)";
 +
    var next = document.getElementById("icon1");
 +
next.style.transform="rotateX(0deg)";
 +
next.style.webkitTransform="rotateX(0deg)";    
 +
 +
var prev = document.getElementById("turn2");
 +
prev.style.transform="rotateX(90deg)";
 +
prev.style.webkitTransform="rotateX(90deg)";
 +
    var next = document.getElementById("icon2");
 +
next.style.transform="rotateX(0deg)";
 +
next.style.webkitTransform="rotateX(0deg)";
 +
 +
var prev = document.getElementById("turn3");
 +
prev.style.transform="rotateX(90deg)";
 +
prev.style.webkitTransform="rotateX(90deg)";
 +
    var next = document.getElementById("icon3");
 +
next.style.transform="rotateX(0deg)";
 +
next.style.webkitTransform="rotateX(0deg)";
 +
 +
var prev = document.getElementById("turn4");
 +
prev.style.transform="rotateX(90deg)";
 +
prev.style.webkitTransform="rotateX(90deg)";
 +
    var next = document.getElementById("icon4");
 +
next.style.transform="rotateX(0deg)";
 +
next.style.webkitTransform="rotateX(0deg)";
 +
 +
var prev = document.getElementById("turn5");
 +
prev.style.transform="rotateX(90deg)";
 +
prev.style.webkitTransform="rotateX(90deg)";
 +
    var next = document.getElementById("icon5");
 +
next.style.transform="rotateX(0deg)";
 +
next.style.webkitTransform="rotateX(0deg)";
 +
 +
var prev = document.getElementById("turn6");
 +
prev.style.transform="rotateX(90deg)";
 +
prev.style.webkitTransform="rotateX(90deg)";
 +
    var next = document.getElementById("icon6");
 +
next.style.transform="rotateX(0deg)";
 +
next.style.webkitTransform="rotateX(0deg)";
 +
 +
 +
}
 +
 +
</script>
</body>
</body>
</html>
</html>

Latest revision as of 01:59, 18 October 2014

Team:XMU-China

Retrieved from "http://2014.igem.org/Team:XMU-China"