Difference between revisions of "Team:BIT-China"

Line 1: Line 1:
 
{{BIT-China}}
 
{{BIT-China}}
−
<html>
+
<html>
 +
<style>
 +
  #container{
 +
width:100%;
 +
height:100%;
 +
text-align:center;
 +
  }
 +
  #title{
 +
font-family: Jokerman;
 +
font-size: 60px;
 +
color: #68441c;
 +
width:100%;
 +
height:80px;
 +
position:absolute;
 +
top:130px;
 +
background
 +
z-index:-2;
 +
  }
 +
  /*background-image:url("../image/index_title.png");
 +
background-position:center;
 +
background-repeat:no-repeat;*/
 +
  #bacterium_coli{
 +
width:210px;
 +
height:350px;
 +
background-repeat:no-repeat;
 +
background-image:url("https://static.igem.org/mediawiki/2015/3/38/BIT_China_bacterium_coli.png");
 +
background-position:center;
 +
position:absolute;
 +
top:235px;
 +
left:10px;
 +
  }
 +
  #index_glass_garden{
 +
width:100%;
 +
height:250px;
 +
background-image:url("https://static.igem.org/mediawiki/2015/6/6d/BIT_China_index_glass_garden.png");
 +
background-repeat:no-repeat;
 +
background-position:center;
 +
position:absolute;
 +
top:440px;
 +
  }
 +
@media screen and (max-width:1024px){
 +
#title{
 +
background-size:90%;
 +
}
 +
 
 +
}
 +
</style>
 +
<script>
 +
$(document).ready(function(){
 +
var pos = $('#taiji').offset().left;
 +
var outerWidth_icon = $('#taiji').outerWidth();
 +
var outerWidth_coli = $('#bacterium_coli').outerWidth();
 +
$('#bacterium_coli').css('left', pos+outerWidth_icon/2-outerWidth_coli/2);
 +
 +
$("a").mouseover(function(){
 +
$('#bacterium_coli').stop(true, false);
 +
 
 +
pos=$(this).children("div").eq(0).offset().left;
 +
var newposX = pos+outerWidth_icon/2-outerWidth_coli/2;
 +
var aa = $('#bacterium_coli').offset().left;
 +
if(aa> newposX ){
 +
$('#bacterium_coli').css('background-position','0px 0px');
 +
}else if(aa< newposX ){
 +
  $('#bacterium_coli').css('background-position','-420px 0px');
 +
}
 +
else{
 +
  $('#bacterium_coli').css('background-position','-210px 0px');
 +
}
 +
 +
$('#bacterium_coli').animate({
 +
'left':newposX,
 +
}, 500, function(){
 +
$('#bacterium_coli').css('background-position','-210px 0px');
 +
});
 +
 
 +
 +
 +
});
 +
 +
$('#top_nav span').mouseover(function(){
 +
$('#bacterium_coli').css('background-position','-210px 0px');
 +
});
 +
//$('a').mouseover(function(){
 +
//   $(this).children("div").children("img").addClass("bounce");
 +
//});
 +
 +
});
 +
</script>
 +
 
 +
 
 +
 
 +
 
 +
<div id="container">
 +
<h1 id="title">pH  &nbsp; controller</h1>
 +
<div id="index_glass_garden"></div>
 +
<div id="bacterium_coli"></div>
 +
</div>
 +
 
 
</div><!-- End of content -->
 
</div><!-- End of content -->
 
</div><!-- End of mainContainer -->
 
</div><!-- End of mainContainer -->

Revision as of 18:51, 13 September 2015



Add a banner to your wiki!

You can make the image 980px by 200px

Remember to call the file: "Team_BIT-China_banner.jpg"

pH   controller



-->