Team:Nanjing NFLS/humanpractice.html

From 2014hs.igem.org

(Difference between revisions)
 
(87 intermediate revisions not shown)
Line 1: Line 1:
-
<html>
+
<html xmlns="http://www.w3.org/1999/xhtml">
 +
<head>
 +
<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>Human Practice | iGEM Nanjing_NFLS</title>
 +
<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:0 0 0 0px;
 +
padding:0;
 +
position: absolute;
 +
background-color: #E3E3E3;
 +
line-height: normal;
 +
    width: 1350px;
 +
    border-left-width:0px;
 +
    border-right-width:0px;
 +
    padding:0px;
 +
}
 +
 
 +
#p-logo {
 +
    height:0px; overflow:hidden; display: none;
 +
}
 +
#top-section {
 +
    background-color: #444444;
 +
    height: 0px;
 +
    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;}
 +
body {
 +
background-color: #E3E3E3;
 +
width: 100%;
 +
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: 697px;
 +
z-index: 1;
 +
left: 0px;
 +
top: 0px;
 +
overflow: hidden;
 +
font-size: 16px;
 +
}
 +
#logo {
 +
position: absolute;
 +
width: 250px;
 +
height: 157px;
 +
z-index: 1;
 +
left: 32px;
 +
top: 1px;
 +
}
 +
#banner {
 +
position: absolute;
 +
width: 1350px;
 +
height: 100px;
 +
z-index: 19;
 +
left: 282px;
 +
top: 0px;
 +
opacity: 0.6;
 +
}
 +
#primary-nav {
 +
position: absolute;
 +
width: 1800px;
 +
height: 50px;
 +
z-index: 2;
 +
left:290px;
 +
top: 116px;
 +
}
 +
#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: 216px;
 +
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;
 +
}
 +
#mainframe {
 +
position: absolute;
 +
top: 182px;
 +
left: 0px;
 +
height: 465px;
 +
width: 1350px;
 +
z-index:1;
 +
}
 +
#leftarrow {
 +
position: absolute;
 +
top: 168px;
 +
left: 0px;
 +
width: 100px;
 +
height: 100px;
 +
opacity: 0.5;
 +
z-index:5;
 +
}
 +
#rightarrow {
 +
position: absolute;
 +
top: 168px;
 +
right: 0px;
 +
width: 100px;
 +
height: 100px;
 +
opacity: 0.5;
 +
z-index:6;
 +
}
 +
#slide1 {
 +
margin-left: 125px;
 +
margin-right: 125px;
 +
position: absolute;
 +
left: 0px;
 +
top: 0px;
 +
height: 465px;
 +
width: 1100px;
 +
z-index: 3;
 +
font-size: 22px;
 +
 +
}
 +
#slide2 {
 +
margin-left: 125px;
 +
margin-right: 125px;
 +
position: absolute;
 +
left: 1350px;
 +
top: 0px;
 +
height: 465px;
 +
width: 1100px;
 +
z-index: 3;
 +
font-size: 22px;
 +
}
 +
#bottom {
 +
position: absolute;
 +
width: 1350px;
 +
height: 50px;
 +
left: 0px;
 +
top: 647px;
 +
opacity: 0.6;
 +
z-index:100;
 +
}
 +
</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 menu1 = $("div.menuPlist");
 +
  var menu2 = $("div.menuNlist");
 +
  var cont = new Array("<img src=\"https://static.igem.org/mediawiki/2014hs/c/c9/NFLSHP1.jpg\" width=\"800\" height=\"425\" />", "<p><div style=\"color:#FF0000\">A Club</div>To attract more attention on the competition and our project about the CRISPR-Cas system, we ran a club named iGEMER at NFLS(Nanjing Foreign Languages School) and held educational and elementary activities on the days of Nanjing Club Summit and NFLS Club Salon, the most ceremonious club celebrations in Nanjing and in NFLS. Once or twice a week hundreds of students took part in the club activities including the study group about synthetic biology in which they shared the latest findings and breakthroughs in biological field, the lectures given by the well-known professors from China Pharmaceutical University about the development of the modern biological technologies, transformation from the simple-helix structure of RNA to the double-helix structure of DNA, construction and application of Biobricks, some hands-on experiments such as the DNA extraction finished by the students from different grades, and trips and studies in the labs in universities and companies. We set up a platform for every high school students interested in biology to share their novel ideas. During the practice, we prepared presentations about the topic we were going to talk about before the seminar started and in that case the different levels of students’ previous knowledge would not cause any frictions. After the seminar, we got a large amount of positive feedbacks from the club members and successfully aroused the sparks and potential interest around us.</p>", "<img src=\"https://static.igem.org/mediawiki/2014hs/f/fd/NFLSHP2.png\" width=\"500\" height=\"465\" />", "<p><div style=\"color:#FF0000\">A Homepage</div>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. Along with the project underway, the new findings and periodical conclusions were added into the context of relative segments.</p><p>Apart from the homepage we created,, we also posed some updates on social network such as Wechat, RENREN and Weibo. We attracted a lot of attention from the public and lots of them also participated in our group discussion. Several great ideas generated here. At the same time, we put the link to our homepage on these channels, which increased the everyday visits to our website.</p>", "<img src=\"https://static.igem.org/mediawiki/2014hs/6/6f/NFLSHP4.png\" width=\"800\" height=\"425\" />", "<p><div style=\"color:#FF0000\">Acknowledgment</div>We thank Professor Hong Zhu and Hong Tian for their instruction and consultation during our experiments, Principal Zhengjing Dong for his support and encouragement which give us initial motivation to participate in the competition, and China Pharmaceutical University and Nanjing University for facilities support. Last but not least, we want to thank iGEM competition to give us this chance practicing what we really want to do in the future.</p>");
 +
  var now = 0;
 +
  var anchorsl = location.hash;
 +
  if (anchorsl != "") {
 +
  anchorsl = parseInt(anchorsl.substring(1, anchorsl.length + 1));
 +
  now = anchorsl;
 +
  };
 +
  $("#slide1").html(cont[now]);
 +
  $("#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);
 +
  };
 +
  });
 +
  $("#leftarrow").click(function(){
 +
  if (now > 0) {
 +
      if ($("#slide1").hasClass("cur")) {
 +
      return;
 +
      };
 +
      $("#slide1").addClass("cur");
 +
  now -= 1;
 +
  $("#slide2").html(cont[now]);
 +
      $("#slide2").css("left", -1350);
 +
  $("#slide1").animate({"left":1350}, 1000);
 +
      $("#slide2").animate({"left":0}, 1000, function() {
 +
          $("#slide1").html(cont[now]);
 +
          $("#slide1").css("left", 0);
 +
          $("#slide2").css("left", -1350);
 +
  $("#slide1").removeClass("cur");
 +
          });
 +
  }
 +
  });
 +
  $("#rightarrow").click(function(){
 +
  if (now < cont.length - 1) {
 +
      if ($("#slide1").hasClass("cur")) {
 +
      return;
 +
      };
 +
      $("#slide1").addClass("cur");
 +
  now += 1;
 +
  $("#slide2").html(cont[now]);
 +
      $("#slide2").css("left", 1350);
 +
  $("#slide1").animate({"left":-1350}, 1000);
 +
      $("#slide2").animate({"left":0}, 1000, function() {
 +
          $("#slide1").html(cont[now]);
 +
          $("#slide1").css("left", 0);
 +
          $("#slide2").css("left", 1350);
 +
  $("#slide1").removeClass("cur");
 +
          });
 +
  }
 +
  });
 +
});
 +
</script>
 +
</head>
 +
 
 +
<body topmargin="0">
 +
<div id="page">
 +
<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">
<div id="primary-nav">
   <ul>
   <ul>
-
   <li id="nav-main" ><a href="https://2014hs.igem.org/Team:Nanjing_NFLS/main.html">MAIN</a></li>
+
   <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-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-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-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-safety"><a href="https://2014hs.igem.org/Team:Nanjing_NFLS/safety.html">SAFETY</a></li>
-
   <li id="nav-humanpractice" class="selected"><a href="https://2014hs.igem.org/Team:Nanjing_NFLS/humanpractice.html">HUMAN PRACTICE</a></li>
+
   <li class="selected" 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-team"><a href="https://2014hs.igem.org/Team:Nanjing_NFLS/team.html">TEAM</a></li>
-
   <li id="av-ourpartners"><a href="https://2014hs.igem.org/Team:Nanjing_NFLS/ourpartners.html">OUR PARTNERS</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>
   <li id="nav-contactus"><a href="mailto:shushutaishuaile@outlook.com">CONTACT US</a></li>
   </ul>
   </ul>
</div>
</div>
-
</html>
+
<div id="menuProject">
-
<html >
+
  <div id="menuPbar1" class="menuPlist" style="top:16px" onclick="document.location.href='https://2014hs.igem.org/Team:Nanjing_NFLS/project.html#0';">ABSTRACT</div>
-
<head>
+
  <div id="menuPbar2" class="menuPlist" style="top:56px" onclick="document.location.href='https://2014hs.igem.org/Team:Nanjing_NFLS/project.html#1';">TOOKIT</div>
-
<style>
+
  <div id="menuPbar3" class="menuPlist" style="top:96px" onclick="document.location.href='https://2014hs.igem.org/Team:Nanjing_NFLS/biobricks.html';">FUNCTION</div>
-
html,body,div,img,q,dl,dt,dd,ol,ul,li{margin:0;padding:0;}
+
  <div id="menuPbar4" class="menuPlist" style="top:136px" onclick="document.location.href='https://2014hs.igem.org/Team:Nanjing_NFLS/project.html#9';">ADVANTAGE</div>
-
img,a img{border-style:none;border-width:0;}
+
  <div id="menuPbar5" class="menuPlist" style="top:176px" onclick="document.location.href='https://2014hs.igem.org/Team:Nanjing_NFLS/notebook.html#design';">DESIGN</div>
-
a,a:hover{ text-decoration:none;}
+
  <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>
-
html {margin:0 auto;}
+
  <div id="menuP-hbar1" class="menuP-hbar" style="top:55px"></div>
-
ol,ul,li{list-style: none;}:focus{outline: 0;}
+
  <div id="menuP-hbar2" class="menuP-hbar" style="top:95px"></div>
-
body{background-color:#eef9f8; color:#666}
+
  <div id="menuP-hbar3" class="menuP-hbar" style="top:135px"></div>
-
a,a:visited{ color:#666}
+
  <div id="menuP-hbar4" class="menuP-hbar" style="top:175px"></div>
-
a:hover {color:#009966;}
+
  <div id="menuP-hbar5" class="menuP-hbar" style="top:215px"></div>
-
span{font-size:14}
+
</div>
-
.main{ font-family:宋体; color:#666; width:912px; margin:0 auto}
+
<div id="menuNotebook">
-
.slider-scroll{margin-top:12px; overflow:hidden;height:421px;}
+
  <div id="menuNbar1" class="menuNlist" style="top:16px" onclick="document.location.href='https://2014hs.igem.org/Team:Nanjing_NFLS/notebook.html#prove';">PROVE</div>
-
#showArea{ width:664px; float:left;height:419px;border:1px solid #bebebe; border-right:none;}
+
  <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>
-
#showArea img{ opacity:0; display:none;}
+
  <div id="menuNbar3" class="menuNlist" style="top:96px" onclick="document.location.href='https://2014hs.igem.org/Team:Nanjing_NFLS/notebook.html';">EXAMINE</div>
-
#scrollDiv{float:left; width:246px; height:421px; background:url(/jscss/demoimg/201402/slider_side.jpg) 0 0 no-repeat}
+
  <div id="menuN-hbar1" class="menuN-hbar" style="top:55px"></div>
-
#scrollDiv ul{ padding:200px 0 0 0}
+
  <div id="menuN-hbar2" class="menuN-hbar" style="top:95px"></div>
-
#scrollDiv li{width:250px;height:57px;padding:200px 0 10px 26px; cursor:pointer; font-family:微软雅黑;}
+
</div>
-
#scrollDiv li.on{ background:#003030; position:relative;}
+
 
-
#scrollDiv li a{display:block; font-size:28px; height:35px; line-height:35px; color:#fff;}
+
  <div id="mainframe">
-
#scrollDiv li span{
+
    <div id="leftarrow">
-
display: block;
+
      <img src="https://static.igem.org/mediawiki/2014hs/9/97/LeftArrow.png" width="100" height="100" alt="leftArrow" />
-
color: #CCCCCC;
+
    </div>
-
font-size: 36px;
+
    <div id="slide1">
-
height: 15px;
+
    </div>
-
line-height: 15px;
+
    <div id="slide2">
-
}
+
    </div>
-
#scrollDiv li span.entity-triangle{ display:none; }
+
    <div id="rightarrow">
-
#scrollDiv li.on span.entity-triangle{position:absolute; top:31px; left:-6px; display:block; width:6px; height:22px;z-index:99;}
+
        <img src="https://static.igem.org/mediawiki/2014hs/c/cc/RightArrow.png" width="100" height="100" alt="rightArrow" />
-
</style>
+
    </div>
-
<script type="text/javascript" src="/ajaxjs/jquery-1.6.2.min.js"></script>
+
  </div>
-
<script type="text/javascript">
+
-
$.extend({
+
-
      manualScroll:function(opt,callback){
+
-
          //alert("suc");
+
-
          this.defaults = {
+
-
              objId:"",
+
-
              showArea:"",
+
-
              showWidth:419,
+
-
              showHeight:664,
+
-
              showTitle: false,
+
-
              width:350,
+
-
              height:100,
+
-
              picTimer:0,
+
-
interval:5500
+
-
          };
+
-
+
-
          var opts = $.extend(this.defaults,opt);
+
-
var $objId = opts.objId;
+
-
var $showArea = opts.showArea;
+
-
var $showWidth = opts.showWidth;
+
-
var $showHeight = opts.showHeight;
+
-
var $showTitle = opts.showTitle;
+
-
var $width = opts.width;
+
-
var $height = opts.height;
+
-
var $titleopacity = opts.titleopacity;
+
-
var $picTimer = opts.picTimer;
+
-
var index=0;
+
-
var $len = $("#"+$objId).find("ul li").length;
+
-
$("#"+$showArea).find("img").css({"height":$showHeight,"width":$showWidth});
+
-
$("#"+$objId).find("ul li").hover(function(){
+
-
  index = $(this).index();
+
-
  showimg(index);
+
-
});
+
-
$(".slider-scroll").hover(function(){
+
-
              clearInterval($picTimer);
+
-
              },function(){
+
-
                  $picTimer = setInterval(function() {
+
-
  if(index==$len-1)
+
-
            {
+
-
        index=0;
+
-
            }
+
-
else
+
-
{
+
-
    index+=1;
+
-
}
+
-
                      $("#"+$objId).find("ul li").removeClass("on");
+
-
        $("#"+$objId).find("ul li").eq(index).addClass("on");
+
-
$("#"+$showArea).find("img").css({"display":"none","opacity":"0.3"});
+
-
$("#"+$showArea).find("img").eq(index).css({"display":"block"}).stop(true,false).animate({"opacity":"1"},500);
+
-
                  },opts.interval);  
+
-
          }).trigger("mouseleave");
+
-
function showimg(index)
+
-
{
+
-
if(index==$len)
+
-
    {
+
-
  index=0;
+
-
    }
+
-
  $("#"+$objId).find("ul li").removeClass("on");
+
-
  $("#"+$objId).find("ul li").eq(index).addClass("on");
+
-
  $("#"+$showArea).find("img").css({"display":"none","opacity":"0.3"});
+
-
  $("#"+$showArea).find("img").eq(index).css({"display":"block"}).stop(true,false).animate({"opacity":"1"},500);
+
-
  index+=1;
+
-
}
+
-
}
+
-
});
+
-
</script>
+
-
</head>
+
-
<body>
+
-
<script type="text/javascript">
+
-
//home
+
-
$(document).ready(function(){
+
-
$.manualScroll({
+
-
objId:"scrollDiv",
+
-
showArea:"showArea",
+
-
showWidth:664,
+
-
showHeight:419,
+
-
showTitle: true,
+
-
picTimer:0,
+
-
interval:3000
+
-
});
+
-
});
+
-
</script>
+
-
<div class="main">
+
-
<div class="slider-scroll f-c">
+
-
<div id="showArea">
+
-
<a  target="_blank"><img style="display:block; opacity:1;" src="https://static.igem.org/mediawiki/2014hs/1/12/NFLS_Wzn-done.png" width="664px" height="419px"></a>
+
-
<a  target="_blank"><img style="display:block; opacity:1;" src="https://static.igem.org/mediawiki/2014hs/1/12/NFLS_Wzn-done.png" width="664px" height="419px"></a>
+
-
<a  target="_blank"><img style="display:block; opacity:1;" src="https://static.igem.org/mediawiki/2014hs/f/fc/NFLSLYF%281%29.png" width="664px" height="419px"></a>
+
-
</div>
+
-
<div id="scrollDiv">
+
-
<ul>
+
-
<li class="on"><a target="_blank">A Club</a><span class="entity-triangle"></span></li>
+
-
<li ><a target="_blank">A HomePage</a><span class="entity-triangle"></span></li>
+
-
<li ><a target="_blank">Acknowledgement</a><span class="entity-triangle"></span></li>
+
-
</ul>
+
-
</div>
+
-
</div>
+
</div>
</div>
-
<div style="text-align:center;clear:both">
+
<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>
</div>
</div>
</body>
</body>
</html>
</html>
-
{{Template:NFLSIndex}}
 

Latest revision as of 03:52, 21 June 2014

Human Practice | iGEM Nanjing_NFLS

leftArrow
rightArrow
bottomimage

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