Team:Nanjing NFLS/team.html

From 2014hs.igem.org

(Difference between revisions)
Line 1: Line 1:
-
{{Template:NFLSIndex}}
+
<html xmlns="http://www.w3.org/1999/xhtml">
-
<html>
+
<head>
<head>
-
<title>JavaScript图片特效</title>
+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 +
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
 +
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
 +
<title>Main | iGEM Nanjing_NFLS</title>
<style type="text/css">
<style type="text/css">
html {
html {
Line 239: Line 241:
}
}
 +
</script>
 +
<style type="text/css">
 +
body {
 +
background-color: #E3E3E3;
 +
font: century ;
 +
width: 1350px;
 +
padding: 0px;
 +
margin: 0px;
 +
border: 0px;
 +
}
 +
body,td,th {
 +
font-size: large;
 +
color: #000;
 +
font-family: "Century Gothic";
 +
}
 +
#page {
 +
margin-left:auto;
 +
margin-right:auto;
 +
position: absolute;
 +
width: 1350px;
 +
height: 648px;
 +
z-index: 0;
 +
left: 0px;
 +
top: 0px;
 +
overflow: hidden;
 +
font-size: 16px;
 +
}
 +
#logo {
 +
position: absolute;
 +
width: 250px;
 +
height: 157px;
 +
z-index: 1;
 +
left: 32px;
 +
top: 1px;
 +
}
 +
#primary-nav {
 +
position: absolute;
 +
width: 1095px;
 +
height: 60px;
 +
z-index: 2;
 +
right: -16px;
 +
top: 112px;
 +
}
 +
#primary-nav li{
 +
display: inline;
 +
list-style-type: none;
 +
overflow: hidden;
 +
}
 +
#primary-nav li a{
 +
margin-right: 15px;
 +
padding-top: 4px;
 +
overflow: hidden;
 +
color: #000;
 +
padding-top: 4px;
 +
text-decoration: none;
 +
border-top-width: 4px;
 +
border-top-style: solid;
 +
border-top-color: #E3E3E3;
 +
}
 +
#nav-contactus a{
 +
border-top-color: #000 !important;
 +
margin-left: 80px;
 +
}
 +
#nav-contactus a:hover{
 +
border-top-color: #2080C0 !important;
 +
}
 +
#primary-nav li a:hover{
 +
color: #2080C0;
 +
}
 +
#primary-nav li.selected a{
 +
border-top-color: #2080C0;
 +
color: #2080C0;
 +
}
 +
#menuProject{
 +
position: absolute;
 +
width: 160px;
 +
height: 256px;
 +
left: -500px;
 +
top: 136px;
 +
z-index: 18;
 +
cursor: pointer;
 +
}
 +
.menuPlist{
 +
position: absolute;
 +
padding-left: 20px;
 +
line-height: 40px;
 +
width: 140px;
 +
height: 40px;
 +
left: 0px;
 +
color: #FFF;
 +
background: rgba(50, 50, 50, 0.5);
 +
}
 +
.menuP-hbar {
 +
position: absolute;
 +
left: 20px;
 +
width: 110px;
 +
height: 3px;
 +
background-color: #0D7DBC;
 +
z-index: 19;
 +
}
 +
#menuNotebook{
 +
position: absolute;
 +
width: 160px;
 +
height: 136px;
 +
left: -500px;
 +
top: 136px;
 +
z-index: 18;
 +
cursor: pointer;
 +
}
 +
.menuNlist{
 +
position: absolute;
 +
padding-left: 20px;
 +
line-height: 40px;
 +
width: 140px;
 +
height: 40px;
 +
left: 0px;
 +
color: #FFF;
 +
background: rgba(50, 50, 50, 0.5);
 +
}
 +
.menuN-hbar {
 +
position: absolute;
 +
left: 20px;
 +
width: 110px;
 +
height: 3px;
 +
background-color: #0D7DBC;
 +
z-index: 19;
 +
}
 +
#bottom {
 +
position: absolute;
 +
width: 100%;
 +
height: 50px;
 +
left: 0px;
 +
top: 598px;
 +
opacity: 0.6;
 +
}
 +
#banner {
 +
position: absolute;
 +
width: 1350px;
 +
height: 100px;
 +
z-index: 19;
 +
left: 282px;
 +
top: 0px;
 +
opacity: 0.6;
 +
}
 +
</style>
 +
<script type="text/javascript">
 +
function mousePosition(ev){
 +
    if(ev.pageX || ev.pageY){
 +
        return {x:ev.pageX, y:ev.pageY};
 +
    }
 +
    return {
 +
        x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
 +
        y:ev.clientY + document.body.scrollTop - document.body.clientTop
 +
    };
 +
}
 +
 +
$(document).ready(function(ev){
 +
  var blocks = $("div.trans");
 +
  var menu1 = $("div.menuPlist");
 +
  var menu2 = $("div.menuNlist");
 +
  var absttitle = new Array("What's this about?", "What are the biobricks?", "What's about experiments?", "How we ensure safety?", "How did we popularize it?", "Who are we?");
 +
  var abstcontent = new Array("Utilizing the unique features of CRISPR-Cas9 system, our team developed a gene editing tool kit that can be effectively used in eukaryotic cells. CRISPR-Cas9 based system offers several advantages including greater flexibility in silencing and repairing gene expression, and the ability to introduce larger gene fragments. The system was designed to have great compatibility with a wide range of organisms and easy to work with, and has been preliminarily validated by plasmid transfection in CHO cell line. With iGEM database in mind, the kit follows a modular design and aims to facilitate future iGEM projects with greater flexibility and compatibility in gene editing.", "Our gene editing kit has three components: Guide RNA (g-RNA), outer membrane protein of TMV homologous DNA sequences and CRISPR-Cas9 enzyme. Both the g-RNA and the homologous DNA sequences have high specificity in CHO. And the CRISPR-Cas9 enzyme was proven to be efficient in eukaryotic cells.", "It is the record of our experiments, which concludes every step of design, build-up, and examine; it is the trace of our life, which leaves us the most valuable memory of fighting, sharing, and devoting; it is the path in springtime, which not only gives us a chance to learn synthetic biology, but also provides a platform to boarder our views.", "1.Would any of your project ideas raise safety issues in terms of: researcher safety, public safety, or environmental safety? 2.Do any of the new BioBrick parts (or devices) that you made this year raise safety issues? 3.Is there a local biosafety group, committee, or review board at your institution?4. Do you have any other ideas how to deal with safety issues that could be useful for future iGEM competitions? How could parts, devices and systems be made even safer through biosafety engineering?", "To attract more attention on the competition and our project about the CRISPR-Cas system, we ran a club named iGEMER at NFLS. A home page about our study has been created since we started our project. On the website, we have several segments: team introduction, project progress, notebook, results and conclusions, safety, attributions, human practices and amusement. ", "We are a group of passionate syudents from Nanjing Foreign Languages School, specializing in different disciplines: BIO, computer science, mathematics.., we gather together, questing for the same interest. We are the symbol of plurality, vitality and unity.");
 +
  var picts = new Array("https://static.igem.org/mediawiki/2014hs/6/6a/NFLS_image6.png", "https://static.igem.org/mediawiki/2014hs/7/70/NFLS_image2.png", "https://static.igem.org/mediawiki/2014hs/c/c0/NFLS_image3.png", "https://static.igem.org/mediawiki/2014hs/7/7f/NFLS_image5.png", "https://static.igem.org/mediawiki/2014hs/e/ed/NFLS_image4.png", "https://static.igem.org/mediawiki/2014hs/b/be/NFLS_image1.png");
 +
  $("#menuProject").css("height", "0px");
 +
  $("#menuNotebook").css("height", "0px");
 +
  $("#nav-notebook").mouseover(function(){
 +
  if ($("#menuNotebook").hasClass("cur")) {
 +
  return;
 +
  };
 +
  $("#menuNotebook").addClass("cur");
 +
  $("#menuNotebook").css("left", "532px");
 +
  $("#menuNotebook").animate({height:'136px'}, 500, function(){
 +
  $("#menuNotebook").removeClass("cur");
 +
  });
 +
  });
 +
  $("#nav-notebook").mouseout(function(ev){
 +
  $("#menuNotebook").addClass("cur");
 +
  var mousePos = mousePosition(ev);
 +
  if (mousePos.y < 136) {
 +
  $("#menuNotebook").animate({height:'0px'}, 500, function(){
 +
  $("#menuNotebook").css("left", "-500px");
 +
          $("#menuNotebook").removeClass("cur");
 +
  });
 +
  }
 +
  else {
 +
      $("#menuNotebook").removeClass("cur");
 +
  };
 +
  });
 +
  $("#menuNotebook").mouseleave(function(ev){
 +
  $(this).addClass("cur");
 +
  var mousePos = mousePosition(ev);
 +
  if ((mousePos.y > 136) || (mousePos.x > 640) || (mousePos.x < 553)) {
 +
          $("#menuNotebook").animate({height:'0px'}, 500, function(){
 +
      $("#menuNotebook").css("left", "-500px");
 +
  $("#menuNotebook").removeClass("cur");
 +
      });
 +
  }
 +
  else {
 +
      $("#menuNotebook").removeClass("cur");
 +
  };
 +
  });
 +
  $("div.menuNlist").mouseover(function(){
 +
  var i = $.inArray(this, menu2);
 +
  if ($(this).hasClass("cur")) {
 +
  return;
 +
  };
 +
  $(this).addClass("cur");
 +
  $("#" + this.id).animate({left:'-20px', width:'220px', backgroundColor:'rgba(13, 125, 188, 1)'}, 300);
 +
  if (i > 0) {
 +
    $("#menuN-hbar" + String(i)).animate({opacity:'0'}, 200);
 +
  };
 +
  if (i < 2) {
 +
    $("#menuN-hbar" + String(i + 1)).animate({opacity:'0'}, 200);
 +
  };
 +
  });
 +
  $("div.menuNlist").mouseout(function(){
 +
  var i = $.inArray(this, menu2);
 +
  var f = 0;
 +
  $("#" + this.id).animate({left:'0px', width:'140px', backgroundColor:'rgba(50, 50, 50, 0.5)'}, 300, function(){
 +
      $(this).removeClass("cur");
 +
  });
 +
  if (i > 0) {
 +
    $("#menuN-hbar" + String(i)).animate({opacity:'1'}, 200);
 +
  };
 +
  if (i < 2) {
 +
    $("#menuN-hbar" + String(i + 1)).animate({opacity:'1'}, 200);
 +
  };
 +
  });
 +
  $("#nav-project").mouseover(function(){
 +
  if ($("#menuProject").hasClass("cur")) {
 +
  return;
 +
  };
 +
  $("#menuProject").addClass("cur");
 +
  $("#menuProject").css("left", "340px");
 +
  $("#menuProject").animate({height:'256px'}, 500, function(){
 +
  $("#menuNotebook").removeClass("cur");
 +
  });
 +
  });
 +
  $("#nav-project").mouseout(function(ev){
 +
  $("#menuProject").addClass("cur");
 +
  var mousePos = mousePosition(ev);
 +
  if (mousePos.y < 136) {
 +
      $("#menuProject").animate({height:'0px'}, 500, function(){
 +
  $("#menuProject").css("left", "-500px");
 +
          $("#menuProject").removeClass("cur");
 +
  });
 +
  }
 +
  else {
 +
      $("#menuProject").removeClass("cur");
 +
  };
 +
  });
 +
  $("#menuProject").mouseleave(function(ev){
 +
  $(this).addClass("cur");
 +
  var mousePos = mousePosition(ev);
 +
  if ((mousePos.y > 136) || (mousePos.x > 430) || (mousePos.x < 361)) {
 +
          $("#menuProject").animate({height:'0px'}, 500, function(){
 +
      $("#menuProject").css("left", "-500px");
 +
  $("#menuProject").removeClass("cur");
 +
      });
 +
  }
 +
  else {
 +
      $("#menuProject").removeClass("cur");
 +
  };
 +
  });
 +
  $("div.menuPlist").mouseover(function(){
 +
  var i = $.inArray(this, menu1);
 +
  if ($(this).hasClass("cur")) {
 +
  return;
 +
  };
 +
  $(this).addClass("cur");
 +
  $("#" + this.id).animate({left:'-20px', width:'220px', backgroundColor:'rgba(13, 125, 188, 1)'}, 300);
 +
  if (i > 0) {
 +
    $("#menuP-hbar" + String(i)).animate({opacity:'0'}, 200);
 +
  };
 +
  if (i < 5) {
 +
    $("#menuP-hbar" + String(i + 1)).animate({opacity:'0'}, 200);
 +
  };
 +
  });
 +
  $("div.menuPlist").mouseout(function(){
 +
  var i = $.inArray(this, menu1);
 +
  var f = 0;
 +
  $("#" + this.id).animate({left:'0px', width:'140px', backgroundColor:'rgba(50, 50, 50, 0.5)'}, 300, function(){
 +
      $(this).removeClass("cur");
 +
  });
 +
  if (i > 0) {
 +
    $("#menuP-hbar" + String(i)).animate({opacity:'1'}, 200);
 +
  };
 +
  if (i < 5) {
 +
    $("#menuP-hbar" + String(i + 1)).animate({opacity:'1'}, 200);
 +
  };
 +
  });
 +
});
</script>
</script>
</head>
</head>
-
<body>
+
 
 +
<body topmargin="0">
 +
<div id="page">
<div id="screen"></div>
<div id="screen"></div>
<div id="bankImages">
<div id="bankImages">
Line 266: Line 562:
tv.init();
tv.init();
</script>
</script>
 +
<div id="logo"><img src="https://static.igem.org/mediawiki/2014hs/7/73/NFLSLOGONEW.jpg" width="250" height="157" alt="iGEM_NFLS" /></div>
 +
  <div id="banner"><img src="https://static.igem.org/mediawiki/2014hs/3/31/NFLS_banner.jpg" width="1350" height="100" alt="banner" /></div>
 +
<div id="primary-nav">
 +
  <ul>
 +
  <li class="selected" id="nav-main" ><a href="https://2014hs.igem.org/Team:Nanjing_NFLS">MAIN</a></li>
 +
  <li id="nav-project"><a href="https://2014hs.igem.org/Team:Nanjing_NFLS/project.html">PROJECT</a></li>
 +
  <li id="nav-biobricks"><a href="https://2014hs.igem.org/Team:Nanjing_NFLS/biobricks.html">BIOBRICKS</a></li>
 +
  <li id="nav-notebook"><a href="https://2014hs.igem.org/Team:Nanjing_NFLS/notebook.html">NOTEBOOK</a></li>
 +
  <li id="nav-safety"><a href="https://2014hs.igem.org/Team:Nanjing_NFLS/safety.html">SAFETY</a></li>
 +
  <li id="nav-humanpractice"><a href="https://2014hs.igem.org/Team:Nanjing_NFLS/humanpractice.html">HUMAN PRACTICE</a></li>
 +
  <li id="nav-team"><a href="https://2014hs.igem.org/Team:Nanjing_NFLS/team.html">TEAM</a></li>
 +
  <li id="nav-ourpartners"><a href="https://2014hs.igem.org/Team:Nanjing_NFLS/ourpartners.html">OUR PARTNERS</a></li>
 +
  <li id="nav-contactus"><a href="mailto:shushutaishuaile@outlook.com">CONTACT US</a></li>
 +
  </ul>
 +
</div>
 +
<div id="menuProject">
 +
  <div id="menuPbar1" class="menuPlist" style="top:16px" onclick="document.location.href='https://2014hs.igem.org/Team:Nanjing_NFLS/project.html#0';">ABSTRACT</div>
 +
  <div id="menuPbar2" class="menuPlist" style="top:56px" onclick="document.location.href='https://2014hs.igem.org/Team:Nanjing_NFLS/project.html#1';">TOOKIT</div>
 +
  <div id="menuPbar3" class="menuPlist" style="top:96px" onclick="document.location.href='https://2014hs.igem.org/Team:Nanjing_NFLS/biobricks.html';">FUNCTION</div>
 +
  <div id="menuPbar4" class="menuPlist" style="top:136px" onclick="document.location.href='https://2014hs.igem.org/Team:Nanjing_NFLS/project.html#9';">ADVANTAGE</div>
 +
  <div id="menuPbar5" class="menuPlist" style="top:176px" onclick="document.location.href='https://2014hs.igem.org/Team:Nanjing_NFLS/notebook.html#design';;">DESIGN</div>
 +
  <div id="menuPbar6" class="menuPlist" style="top:216px" onclick="document.location.href='https://2014hs.igem.org/Team:Nanjing_NFLS/notebook.html#buildup';">BUILD UP</div>
 +
  <div id="menuP-hbar1" class="menuP-hbar" style="top:55px"></div>
 +
  <div id="menuP-hbar2" class="menuP-hbar" style="top:95px"></div>
 +
  <div id="menuP-hbar3" class="menuP-hbar" style="top:135px"></div>
 +
  <div id="menuP-hbar4" class="menuP-hbar" style="top:175px"></div>
 +
  <div id="menuP-hbar5" class="menuP-hbar" style="top:215px"></div>
 +
</div>
 +
<div id="menuNotebook">
 +
  <div id="menuNbar1" class="menuNlist" style="top:16px" onclick="document.location.href='https://2014hs.igem.org/Team:Nanjing_NFLS/notebook.html#prove';">PROVE</div>
 +
  <div id="menuNbar2" class="menuNlist" style="top:56px" onclick="document.location.href='https://2014hs.igem.org/Team:Nanjing_NFLS/notebook.html#buildup';">BUILD UP</div>
 +
  <div id="menuNbar3" class="menuNlist" style="top:96px" onclick="document.location.href='https://2014hs.igem.org/Team:Nanjing_NFLS/notebook.html';">EXAMINE</div>
 +
  <div id="menuN-hbar1" class="menuN-hbar" style="top:55px"></div>
 +
  <div id="menuN-hbar2" class="menuN-hbar" style="top:95px"></div>
 +
</div>
 +
</div>
 +
 +
 +
 +
<div id="bottom" style="text-align:center;"><img src="https://static.igem.org/mediawiki/2014hs/a/a2/NFLS_bottom.png" width="1350" height="50" alt="bottomimage" /></div>
</body>
</body>
</html>
</html>

Revision as of 15:39, 20 June 2014

Main | iGEM Nanjing_NFLS

bottomimage

Retrieved from "http://2014hs.igem.org/Team:Nanjing_NFLS/team.html"