Team:Nanjing NFLS
From 2014hs.igem.org
(Difference between revisions)
AlexGorilla (Talk | contribs) (Undo revision 7452 by AlexGorilla (talk)) |
AlexGorilla (Talk | contribs) |
||
(37 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
- | |||
<html xmlns="http://www.w3.org/1999/xhtml"> | <html xmlns="http://www.w3.org/1999/xhtml"> | ||
<head> | <head> | ||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | ||
- | <title> | + | <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"> | ||
- | # | + | #LMN { |
- | position:absolute | + | position: absolute; |
- | + | width: 100px; | |
- | + | height: 100px; | |
- | width: | + | z-index: 1; |
- | height: | + | left: 1250px; |
- | z-index:1; | + | top: 0px; |
- | + | ||
} | } | ||
- | # | + | #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; | ||
+ | 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; | ||
+ | } | ||
+ | .trans { | ||
+ | filter: Alpha(opacity=50);/*只对ie7,ie8有效*/ | ||
+ | background: rgba(50, 50, 50, 0.5); | ||
+ | text-align: center; | ||
+ | line-height: 55px; | ||
+ | font-size: 21px; | ||
+ | cursor: pointer; | ||
+ | } | ||
+ | #main-nav { | ||
+ | position: absolute; | ||
+ | color: #FFF; | ||
+ | width: 100%; | ||
+ | height: 448px; | ||
+ | z-index: 3; | ||
+ | left: 0px; | ||
+ | top: 152px; | ||
+ | } | ||
+ | #navb-project { | ||
+ | position: absolute; | ||
+ | z-index: 5; | ||
+ | } | ||
+ | #navb-biobricks { | ||
+ | position: absolute; | ||
+ | z-index: 6; | ||
+ | } | ||
+ | #navb-notebook { | ||
+ | position: absolute; | ||
+ | z-index: 7; | ||
+ | } | ||
+ | #navb-safety { | ||
+ | position: absolute; | ||
+ | z-index: 8; | ||
+ | } | ||
+ | #navb-humanprac { | ||
+ | position: absolute; | ||
+ | z-index: 9; | ||
+ | } | ||
+ | #navb-team { | ||
+ | position: absolute; | ||
+ | z-index: 10; | ||
+ | } | ||
+ | #navb-ourpartners { | ||
+ | position: absolute; | ||
+ | z-index: 11; | ||
+ | } | ||
+ | #navb-context { | ||
+ | position: absolute; | ||
+ | z-index: 12; | ||
+ | background-color: #323232; | ||
+ | font-size: 26px; | ||
+ | } | ||
+ | .navb-hbar { | ||
+ | position: absolute; | ||
+ | left: 80px; | ||
+ | width: 200px; | ||
+ | height: 5px; | ||
+ | background-color: #0D7DBC; | ||
+ | z-index: 15; | ||
+ | } | ||
+ | #pic1{ | ||
+ | z-index: 4; | ||
+ | position: absolute; | ||
+ | left: 0px; | ||
+ | top: 0px; | ||
+ | width: 100%; | ||
+ | height: 448px; | ||
+ | background-repeat: no-repeat; | ||
+ | } | ||
+ | #pic2{ | ||
+ | z-index: 5; | ||
+ | position: absolute; | ||
+ | left: 0px; | ||
+ | top: 0px; | ||
+ | width: 100%; | ||
+ | height: 448px; | ||
+ | background-repeat: no-repeat; | ||
+ | } | ||
+ | #slide{ | ||
+ | position: absolute; | ||
+ | z-index: 17; | ||
+ | width: 300px; | ||
+ | height: 30px; | ||
+ | right: -35px; | ||
+ | bottom: 25px; | ||
+ | } | ||
+ | #slide-ic{ | ||
+ | display: inline; | ||
+ | list-style-type: none; | ||
+ | margin-left: -40px; | ||
+ | font-size: x-large; | ||
+ | } | ||
+ | #slide-ic li{ | ||
+ | display:inline; | ||
+ | list-style-position:outside; | ||
+ | margin-left:10px; | ||
+ | } | ||
+ | #slide-ic li a{ | ||
+ | color:#FFF; | ||
+ | text-decoration:none; | ||
+ | } | ||
+ | #slide-ic li a:hover{ | ||
+ | color:#1C1C1C; | ||
+ | } | ||
+ | #navb-title { | ||
+ | position: absolute; | ||
+ | width: 750px; | ||
+ | height: 100px; | ||
+ | right: -800px; | ||
+ | top: 0px; | ||
+ | font-size: 54px; | ||
+ | padding-left: 50px; | ||
+ | line-height: 100px; | ||
+ | background: rgba(50, 50, 50, 0.8); | ||
+ | z-index:14; | ||
+ | } | ||
+ | #navb-content { | ||
+ | position: absolute; | ||
+ | width: 640px; | ||
+ | height: 340px; | ||
+ | right: -800px; | ||
+ | top: 100px; | ||
+ | font-size: 16px; | ||
+ | background: rgba(50, 50, 50, 0.8); | ||
+ | padding-left: 100px; | ||
+ | padding-right: 60px; | ||
+ | line-height: 30px; | ||
+ | z-index:13; | ||
+ | } | ||
+ | #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){ | ||
+ | $("#pic1").css("background-image", "url(https://static.igem.org/mediawiki/2014hs/c/c0/NFLS_image3.png)"); | ||
+ | $("#pic2").css("opacity", 0); | ||
+ | var serials = $("li.dots"); | ||
+ | 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.", "<p class=\"temp\">The biological materials used in our project do not pose bio-safety risks. The organisms we worked with in this project all belongs to Risk Group 1. </p><p class=\"temp\">All personnel have received proper training and followed the safety regulations the university lab, whose bio-safety office has approved the project. No public or environmental safety issue was caused due to this project.</p><p class=\"temp\">The gene editing tool kit that we designed can be applied to editing and knockdown of stably integrated genes, </p><p class=\"temp\">for example by removing the antibiotic resistance sequence after the screening/ selection process in molecular cloning, thus limiting the spread and improving the safety of resistance genes in subsequence studies.</p>", "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 students 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/c/c0/NFLS_image3.png", "https://static.igem.org/mediawiki/2014hs/7/70/NFLS_image2.png", "https://static.igem.org/mediawiki/2014hs/6/6a/NFLS_image6.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"); | ||
+ | var state = -1; | ||
+ | var inprocess = 0; | ||
+ | $("#menuProject").css("height", "0px"); | ||
+ | $("#menuNotebook").css("height", "0px"); | ||
+ | $("li.dots").click(function(){ | ||
+ | var i = $.inArray(this, serials); | ||
+ | $("#pic2").css("background-image", "url(" + picts[i] + ")"); | ||
+ | $("#pic2").animate({opacity:'1'}, 500, function() { | ||
+ | $("#pic1").css("background-image", "url(" + picts[i] + ")"); | ||
+ | $("#pic2").css("opacity", 0); | ||
+ | }); | ||
+ | }); | ||
+ | $("#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); | ||
+ | }; | ||
+ | }); | ||
+ | $("div.trans").mouseover(function(){ | ||
+ | var i = $.inArray(this, blocks); | ||
+ | if($(this).hasClass("cur")){ | ||
+ | return; | ||
+ | }; | ||
+ | $(this).addClass("cur"); | ||
+ | $("#" + this.id).animate({left:'-20px', width:'400px', backgroundColor:'rgba(13, 125, 188, 1)'}, 300); | ||
+ | if (i > 0) { | ||
+ | $("#navb-hbar" + String(i)).animate({opacity:'0'}, 200); | ||
+ | }; | ||
+ | if (i < 5) { | ||
+ | $("#navb-hbar" + String(i + 1)).animate({opacity:'0'}, 200); | ||
+ | }; | ||
+ | }); | ||
+ | $("div.trans").mouseout(function(){ | ||
+ | var i = $.inArray(this, blocks); | ||
+ | $(this).animate({left:'30px', width:'300px', backgroundColor:'rgba(50, 50, 50, 0.5)'}, 300, function(){ | ||
+ | $(this).removeClass("cur"); | ||
+ | }); | ||
+ | if (i > 0) { | ||
+ | $("#navb-hbar" + String(i)).animate({opacity:'1'}, 200); | ||
+ | }; | ||
+ | if (i < 6) { | ||
+ | $("#navb-hbar" + String(i + 1)).animate({opacity:'1'}, 200); | ||
+ | }; | ||
+ | }); | ||
+ | $("div.trans").click(function(){ | ||
+ | if (inprocess == 1) { | ||
+ | return; | ||
+ | }; | ||
+ | inprocess = 1; | ||
+ | var i = $.inArray(this, blocks); | ||
+ | if (state == i) { | ||
+ | $("#navb-title").animate({right:'-800px'}, 500); | ||
+ | $("#navb-content").animate({right:'-800px'}, 500); | ||
+ | state = -1; | ||
+ | inprocess = 0; | ||
+ | return; | ||
+ | } | ||
+ | if (state == -1) { | ||
+ | $("#navb-title").html(absttitle[i]); | ||
+ | $("#navb-content").html(abstcontent[i]); | ||
+ | $("#navb-title").animate({right:'0px'}, 1000); | ||
+ | $("#navb-content").animate({right:'0px'}, 1000); | ||
+ | state = i; | ||
+ | inprocess = 0; | ||
+ | return; | ||
+ | } | ||
+ | $("#navb-title").animate({right:'-800px'}, 500); | ||
+ | $("#navb-content").animate({right:'-800px'}, 500, function(){ | ||
+ | $("#navb-title").html(absttitle[i]); | ||
+ | $("#navb-content").html(abstcontent[i]); | ||
+ | $("#navb-title").animate({right:'0px'}, 1000); | ||
+ | $("#navb-content").animate({right:'0px'}, 1000); | ||
+ | state = i; | ||
+ | }); | ||
+ | inprocess = 0; | ||
+ | }); | ||
+ | }); | ||
</script> | </script> | ||
</head> | </head> | ||
- | <body | + | <body topmargin="0"> |
- | <div id=" | + | <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=" | + | <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 id="main-nav"> | ||
+ | <div id="pic1"></div> | ||
+ | <div id="pic2"></div> | ||
+ | <div id="slide"> | ||
+ | <ul id="slide-ic"> | ||
+ | <li class="dots"><a href="#">●</a></li> | ||
+ | <li class="dots"><a href="#">●</a></li> | ||
+ | <li class="dots"><a href="#">●</a></li> | ||
+ | <li class="dots"><a href="#">●</a></li> | ||
+ | <li class="dots"><a href="#">●</a></li> | ||
+ | <li class="dots"><a href="#">●</a></li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | <div class="trans" id="navb-project" style="left: 30px; top: 40px; width: 300px; height: 60px;">What's this about?</div> | ||
+ | <div id="navb-biobricks" class="trans" style="left: 30px; top: 100px; width: 300px; height: 60px;">What are the biobricks?</div> | ||
+ | <div id="navb-notebook" class="trans" style="left: 30px; top: 160px; width: 300px; height: 60px;">What's about experiments?</div> | ||
+ | <div id="navb-safety" class="trans" style="left: 30px; top: 220px; width: 300px; height: 60px;">How we ensure safety?</div> | ||
+ | <div id="navb-humanprac" class="trans" style="left: 30px; top: 280px; width: 300px; height: 60px;">How did we popularize it?</div> | ||
+ | <div id="navb-team" class="trans" style="left: 30px; top: 340px; width: 300px; height: 60px;">Who are we?</div> | ||
+ | <div id="navb-hbar1" class="navb-hbar" style="top:98px"></div> | ||
+ | <div id="navb-hbar2" class="navb-hbar" style="top:158px"></div> | ||
+ | <div id="navb-hbar3" class="navb-hbar" style="top:218px"></div> | ||
+ | <div id="navb-hbar4" class="navb-hbar" style="top:278px"></div> | ||
+ | <div id="navb-hbar5" class="navb-hbar" style="top:338px"></div> | ||
+ | <div id="navb-title"></div> | ||
+ | <div id="navb-content"></div> | ||
+ | </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> |
- | < | + | <div id="LMN"><a href="https://2014hs.igem.org/Main_Page"><img src="https://static.igem.org/mediawiki/2014hs/6/6e/NFLSIgemlogo1.png" width="100" height="100" /></a></div> |
</body> | </body> | ||
</html> | </html> |
Latest revision as of 11:03, 23 September 2014