Team:Nanjing NFLS/team.html

From 2014hs.igem.org

(Difference between revisions)
 
(38 intermediate revisions not shown)
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>Team | iGEM Nanjing_NFLS</title>
<style type="text/css">
<style type="text/css">
 +
        #menubar { font-size: 12px}
 +
p{line-height:100%}
 +
div#contentSub{
 +
    display: none;
 +
    position: absolute;left: 0px;top: 0px;
 +
}
 +
div#top-section{
 +
    background: url() no repeat;
 +
    background-color:#E3E3E3;
 +
    color: #D1E9E9;
 +
    height: 0px;
 +
    width:  100%;
 +
    border: 0px;
 +
 +
}
 +
#content
 +
{
 +
border:none;
 +
height: 100%;
 +
margin:200 0 0 200;
 +
padding:0;
 +
width:100%;
 +
position: absolute;
 +
background-color: #E3E3E3;
 +
}
 +
#content {
 +
line-height: normal;
 +
    width: 975px;
 +
    border-left-width:1000px;
 +
    border-right-width:0px;
 +
    padding:0px;
 +
}
 +
 +
#p-logo {
 +
    height:0px; overflow:hidden; display: none;
 +
}
 +
#top-section {
 +
    background-color: #444444;
 +
    height: 20px;
 +
    border-width:0px;
 +
    border-top-width:0px;
 +
}
 +
 +
#contentSub {
 +
display: none;
 +
}
 +
 +
.firstHeading {
 +
    display: none;
 +
}
 +
div#catlinks {
 +
    visibility: hidden;
 +
    height: 0px;
 +
}
 +
#searchInput
 +
{
 +
    position:relative;
 +
    height:0px;
 +
    margin-bottom:0em;
 +
    visibility:hidden;
 +
}
 +
input.searchButton
 +
{
 +
    height:0px;
 +
    margin-bottom:0em;
 +
    visibility:hidden;
 +
}
 +
#footer-box{display:none;}
 +
#catlinks{display:none;}
html {
html {
overflow: hidden;
overflow: hidden;
Line 9: Line 80:
#screen {
#screen {
position: absolute;
position: absolute;
-
left: 15%;
+
left: 200px;
-
top: 350px;
+
top: 150px;
-
width: 100%;
+
width: 75%;
-
height: 100%;
+
height: 75%;
}
}
#screen img {
#screen img {
Line 18: Line 89:
cursor: pointer;
cursor: pointer;
visibility: hidden;
visibility: hidden;
-
width: 600px;
+
width: 200px;
-
height: 600px;
+
height: 200px;
}
}
#screen .tvover {
#screen .tvover {
Line 239: Line 310:
}
}
 +
</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: 750px;
 +
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: 950px;
 +
opacity: 0.6;
 +
}
 +
#banner {
 +
position: absolute;
 +
width: 1350px;
 +
height: 100px;
 +
z-index: 19;
 +
left: 282px;
 +
top: 0px;
 +
opacity: 0.6;
 +
}
 +
#apDiv1 {
 +
position: absolute;
 +
width: 262px;
 +
height: 505px;
 +
z-index: 20;
 +
left: 45px;
 +
top: 168px;
 +
color: #000;
 +
background-color: white;
 +
font-family: Calibri;
 +
}
 +
</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">
-
<!--这里为了演示速度多，只调用了两张图片，用时候你可以加上你的图片-->
 
<img alt="" src="https://static.igem.org/mediawiki/2014hs/4/42/NFLSYQFNEWNEW.png">
<img alt="" src="https://static.igem.org/mediawiki/2014hs/4/42/NFLSYQFNEWNEW.png">
<img alt="" src="https://static.igem.org/mediawiki/2014hs/1/12/NFLS_Wzn-done.png">
<img alt="" src="https://static.igem.org/mediawiki/2014hs/1/12/NFLS_Wzn-done.png">
Line 266: Line 641:
tv.init();
tv.init();
</script>
</script>
 +
<div id="apDiv1">
 +
  <p style="padding: 10px 20px 0px 20px; font-size: 24px;"><img src="https://static.igem.org/mediawiki/2014hs/f/f8/NFLSProfessor.png" width="240" height="264" style="position:relative;left:-10px;top:-10px">Instructor:</p>
 +
  <p style="word-break: break-all; padding: 0px 20px 0px 20px; font-size: 14px;">Hong Tian: Professor at China Pharmaceutical University. Graduated 2010 with PhD in microbiology and biochemical pharmacy from CPU and continued to teach there. Main research field: chemical modification of proteins, genetic code expansion technology and its applications. Instructed the CPU iGEM team in 2008 and received a bronze medal.</p>
 +
  <p style="word-break:break-all;padding:0px 20px 0px 20px">&nbsp;</p>
 +
</div>
 +
<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  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" class="selected"><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>

Latest revision as of 03:42, 21 June 2014

Team | iGEM Nanjing_NFLS

Instructor:

Hong Tian: Professor at China Pharmaceutical University. Graduated 2010 with PhD in microbiology and biochemical pharmacy from CPU and continued to teach there. Main research field: chemical modification of proteins, genetic code expansion technology and its applications. Instructed the CPU iGEM team in 2008 and received a bronze medal.

 

bottomimage

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