Line 1: | Line 1: | ||
{{JSNU_China/space}} | {{JSNU_China/space}} | ||
+ | <!DOCTYPE html> | ||
<html lang="en"> | <html lang="en"> | ||
<head> | <head> | ||
<meta charset="UTF-8"> | <meta charset="UTF-8"> | ||
− | <title> | + | <title>home</title> |
<style> | <style> | ||
− | + | @media (max-width: 992px){ | |
− | + | body,div,h3,p{ | |
− | + | margin: 0px; | |
− | + | padding: 0px; | |
− | + | } | |
− | } | + | |
− | + | a{ | |
+ | list-style: none; | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | |||
+ | #top{ | ||
+ | width: 100%; | ||
+ | height: 500px; | ||
+ | background-color: white; | ||
+ | background-image: url(https://static.igem.org/mediawiki/2016/a/a1/Jsnuchina_img_body.jpg | ||
+ | ); | ||
+ | background-size: 100% 500px; | ||
+ | background-repeat: no-repeat; | ||
+ | } | ||
− | # | + | #smallnavigation{ |
− | + | width: 100%; | |
− | + | height: 100px; | |
− | + | ||
− | + | ||
− | + | } | |
− | + | ||
− | + | ||
− | + | span.navlogo{ | |
+ | float: right; | ||
+ | margin-top: 20px; | ||
+ | width: 10%; | ||
+ | height: 70px; | ||
} | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
+ | #smallnavs{ | ||
+ | width: 100%; | ||
+ | height: 300px; | ||
+ | position: absolute; | ||
+ | top:90px; | ||
+ | background-color: rgba(255,255,255,0.95); | ||
+ | z-index: 999; | ||
+ | display: none; | ||
} | } | ||
− | # | + | |
+ | #onesmallnav{ | ||
+ | width: 100%; | ||
+ | |||
+ | } | ||
+ | #onesmallnav p{ | ||
+ | color:rgba(0,0,0,0.9); | ||
+ | margin:12px 0 10px 5%; | ||
+ | } | ||
+ | |||
+ | |||
+ | #smallnavselect{ | ||
+ | width: 100%; | ||
+ | height: 1px; | ||
+ | border-top: 1px solid rgb(146,194,40); | ||
+ | display:none; | ||
+ | } | ||
+ | |||
+ | .smallnavmouse{ | ||
+ | display: block !important; | ||
+ | animation:smallnavmous 1s infinite; | ||
+ | -moz-animation:smallnavmous 1s infinite; /*Firefox*/ | ||
+ | -webkit-animation:smallnavmous 1s infinite; /*Safari and Chrome*/ | ||
+ | animation-iteration-count:1; | ||
+ | -moz-animation-iteration-count:1; /*Firefox*/ | ||
+ | -webkit-animation-iteration-count:1; /*Safari and Chrome*/ | ||
+ | } | ||
+ | |||
+ | @keyframes smallnavmous | ||
+ | { | ||
+ | from {width:0;} | ||
+ | to {width:100%;} | ||
+ | } | ||
+ | @-moz-keyframes smallnavmous/*Firefox*/ | ||
+ | { | ||
+ | from {width:0;} | ||
+ | to {width:100%;} | ||
+ | } | ||
+ | @-webkit-keyframes smallnavmous /*Safari and Chrome*/ | ||
+ | { | ||
+ | from {width:0;} | ||
+ | to {width:100%;} | ||
+ | } | ||
+ | |||
+ | |||
+ | .smallnavmouseout{ | ||
+ | animation:smallnavmouseou 1s infinite; | ||
+ | -moz-animation:smallnavmouseou 1s infinite; /*Firefox*/ | ||
+ | -webkit-animation:smallnavmouseou 1s infinite; /*Safari and Chrome*/ | ||
+ | animation-iteration-count:1; | ||
+ | -moz-animation-iteration-count:1; /*Firefox*/ | ||
+ | -webkit-animation-iteration-count:1; /*Safari and Chrome*/ | ||
+ | } | ||
+ | |||
+ | @keyframes smallnavmouseou | ||
+ | { | ||
+ | from {width:100%;} | ||
+ | to {width:0;} | ||
+ | } | ||
+ | @-moz-keyframes smallnavmouseou/*Firefox*/ | ||
+ | { | ||
+ | from {width:100%;} | ||
+ | to {width:0;} | ||
+ | } | ||
+ | @-webkit-keyframes smallnavmouseou /*Safari and Chrome*/ | ||
+ | { | ||
+ | from {width:100%;} | ||
+ | to {width:0;} | ||
+ | } | ||
+ | |||
+ | |||
+ | #navigation{ | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | #smallslider{ | ||
+ | width: 100%; | ||
+ | height: 350px; | ||
+ | margin-top: 50px; | ||
+ | overflow: hidden; | ||
+ | position: relative; | ||
+ | } | ||
+ | |||
+ | #onesmallslider{ | ||
+ | width: 100%; | ||
+ | height: 350px; | ||
+ | position: absolute; | ||
+ | left:100%; | ||
+ | top:0; | ||
+ | } | ||
+ | |||
+ | #onesmallslider h2{ | ||
+ | color: white; | ||
+ | font-family: 幼圆; | ||
+ | text-align: center; | ||
+ | font-size: 1.4em; | ||
+ | } | ||
+ | |||
+ | #smallsliderimg{ | ||
width: 80%; | width: 80%; | ||
− | + | height: 280px; | |
+ | margin-left: 10%; | ||
+ | background-color: rgba(255,255,255,0.5); | ||
} | } | ||
− | + | #slider{ | |
− | + | display: none; | |
− | + | } | |
− | + | } | |
+ | |||
+ | |||
+ | |||
+ | @media (min-width: 993px){ | ||
+ | body,div,a{ | ||
+ | margin: 0px; | ||
+ | padding: 0px; | ||
+ | } | ||
+ | |||
+ | |||
+ | #top{ | ||
+ | width: 100%; | ||
+ | height: 670px; | ||
+ | background-color: white; | ||
+ | background-image: url(https://static.igem.org/mediawiki/2016/a/a1/Jsnuchina_img_body.jpg | ||
+ | ); | ||
+ | background-size: 100% 670px; | ||
+ | background-repeat: no-repeat; | ||
+ | } | ||
+ | |||
+ | #smallnavigation{ | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | #navigation{ | ||
+ | width: 100%; | ||
+ | height: 150px; | ||
+ | } | ||
+ | |||
+ | #onenav{ | ||
+ | width: 7%; | ||
+ | height: 140px; | ||
+ | float: right; | ||
+ | margin:0 8px 0 0; | ||
+ | |||
+ | position: relative; | ||
} | } | ||
− | + | #onenav > h3{ | |
− | + | text-align: center; | |
− | + | top: 40px; | |
− | + | left: 12%; | |
− | + | font-size: 0.9em; | |
− | + | font-family: 微软雅黑; | |
+ | font-weight: normal; | ||
+ | color: #333; | ||
+ | display: block !important; | ||
+ | position: absolute; | ||
} | } | ||
− | + | ||
+ | #smallnav{ | ||
+ | width: 100%; | ||
+ | height: 140px; | ||
float: left; | float: left; | ||
− | + | background-color: rgb(146, 197, 40); | |
− | + | border-radius: 0 0 8px 8px; | |
− | + | display: none; | |
+ | color: white; | ||
text-align: center; | text-align: center; | ||
+ | font-size: 0.8em; | ||
+ | overflow: hidden; | ||
+ | animation:smallnavtoggle 1s infinite; | ||
+ | -moz-animation:smallnavtoggle 1s infinite; /*Firefox*/ | ||
+ | -webkit-animation:smallnavtoggle 1s infinite; /*Safari and Chrome*/ | ||
+ | animation-iteration-count:1; | ||
+ | -moz-animation-iteration-count:1; /*Firefox*/ | ||
+ | -webkit-animation-iteration-count:1; /*Safari and Chrome*/ | ||
} | } | ||
− | + | ||
− | + | ||
− | + | @keyframes smallnavtoggle | |
+ | { | ||
+ | from {height:0px;} | ||
+ | to {height:140px;} | ||
} | } | ||
− | + | @-moz-keyframes smallnavtoggle/*Firefox*/ | |
− | + | { | |
− | + | from {height:0px;} | |
+ | to {height:140px;} | ||
+ | } | ||
+ | @-webkit-keyframes smallnavtoggle /*Safari and Chrome*/ | ||
+ | { | ||
+ | from {height:0px;} | ||
+ | to {height:140px;} | ||
} | } | ||
− | + | .appear{ | |
− | + | display: block !important; | |
− | + | ||
} | } | ||
+ | |||
− | + | #smallslider{ | |
− | + | display: none; | |
− | + | ||
} | } | ||
− | + | #onesmallslider{ | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
display: none; | display: none; | ||
− | |||
} | } | ||
− | + | #smallsliderimg{ | |
− | + | display: none; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
+ | #slider{ | ||
+ | width: 100%; | ||
+ | height: 390px; | ||
+ | margin-top: 80px; | ||
+ | position: relative; | ||
+ | overflow: hidden; | ||
+ | float: left; | ||
+ | } | ||
− | + | #oneslider{ | |
+ | width:100% ; | ||
+ | height: 390px; | ||
+ | float: left; | ||
+ | position: absolute; | ||
+ | left:100%; | ||
+ | top:0; | ||
+ | } | ||
+ | #oneslider h3{ | ||
+ | color: white; | ||
+ | text-align: center; | ||
+ | font-size: 1.8em; | ||
+ | font-family: 幼圆; | ||
+ | letter-spacing: 3px; | ||
+ | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
+ | #sliderleft{ | ||
+ | width: 33%; | ||
+ | height: 300px; | ||
+ | background-color: rgba(255,255,255,0.5); | ||
+ | float: left; | ||
+ | margin:10px 2% 0 14%; | ||
+ | } | ||
− | + | #sliderright{ | |
− | + | width: 33%; | |
− | + | height: 300px; | |
− | + | background-color: rgba(255,255,255,0.5); | |
− | + | float: left; | |
− | + | margin:10px 14% 0 2%; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | |||
− | # | + | #content{ |
− | + | height: 1000px; | |
− | + | } | |
− | + | ||
− | } | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
</style> | </style> | ||
Line 151: | Line 320: | ||
<body> | <body> | ||
<div id="top"> | <div id="top"> | ||
− | <div id=" | + | <div id="smallnavigation"> |
− | < | + | <span class="navlogo"><img src="https://static.igem.org/mediawiki/2016/d/dd/Jsnuchina_img_btn.jpg" width="80%"></span> |
− | + | <div id="smallnavs"> | |
− | + | <div id="onesmallnav"> | |
− | + | <p >· Home</p> | |
− | + | <div id="smallnavselect" class="smallnavmouse"></div> | |
− | + | </div> | |
− | + | <div id="onesmallnav"> | |
− | + | <a href="project.html" class="smalltitle"><p>· Project (Background | Design | Result | Protocal)</p></a> | |
− | </ | + | <div id="smallnavselect"></div> |
− | + | </div> | |
− | < | + | <div id="onesmallnav"> |
− | + | <a href="modeling.html" class="smalltitle"><p>· Modeling (Overview | Date analysis)</p></a> | |
− | + | <div id="smallnavselect"></div> | |
− | + | </div> | |
− | + | <div id="onesmallnav"> | |
− | </ | + | <a href="parts.html" class="smalltitle"><p >· Parts</p></a> |
− | + | <div id="smallnavselect"></div> | |
− | < | + | </div> |
− | < | + | <div id="onesmallnav"> |
− | + | <a href="team.html" class="smalltitle"><p>· Team (Member | Attribution)</p></a> | |
− | < | + | <div id="smallnavselect"></div> |
− | + | </div> | |
− | + | <div id="onesmallnav"> | |
− | </ | + | <a href="human.html" class="smalltitle"><p >· Human Partictice (Activities | Questionnaire | Communication | Sponsor)</p></a> |
− | </ | + | <div id="smallnavselect"></div> |
− | </ | + | </div> |
+ | <div id="onesmallnav"> | ||
+ | <a href="notebook.html" class="smalltitle"><p>· Notebook</p></a> | ||
+ | <div id="smallnavselect"></div> | ||
+ | </div> | ||
+ | <div id="onesmallnav"> | ||
+ | <a href="safety.html" class="smalltitle"><p >· Safety</p></a> | ||
+ | <div id="smallnavselect"></div> | ||
+ | </div> | ||
+ | </div> | ||
</div> | </div> | ||
− | <div id=" | + | <div id="navigation"> |
− | < | + | <a href="safety.html"> |
− | <a href=" | + | <div id="onenav"> |
− | </ | + | <h3 alt="Safety" class="navtitle">Safety</h3> |
+ | <div id="smallnav" class="smallnavs"> | ||
+ | <br><br><br> | ||
+ | Safety | ||
+ | </div> | ||
+ | </div> | ||
+ | </a> | ||
+ | <a href="notebook.html"> | ||
+ | <div id="onenav"> | ||
+ | <h3 alt="Notebook" class="navtitle">Notebook</h3> | ||
+ | <div id="smallnav" class="smallnavs"> | ||
+ | <br><br><br> | ||
+ | Notebook | ||
+ | </div> | ||
+ | </div> | ||
+ | </a> | ||
+ | <a href="human.html"> | ||
+ | <div id="onenav"> | ||
+ | <h3 alt="Human Partictice" class="navtitle">Human Partictice</h3> | ||
+ | <div id="smallnav" class="smallnavs"> | ||
+ | <br> | ||
+ | Activities | ||
+ | <br><br> | ||
+ | Questionnaire | ||
+ | <br><br> | ||
+ | Communication | ||
+ | <br><br> | ||
+ | Sponsor | ||
+ | </div> | ||
+ | </div> | ||
+ | </a> | ||
+ | <a href="team.html"> | ||
+ | <div id="onenav"> | ||
+ | <h3 alt="Team" class="navtitle">Team</h3> | ||
+ | <div id="smallnav" class="smallnavs"> | ||
+ | <br><br><br> | ||
+ | Member | ||
+ | <br><br> | ||
+ | Attribution | ||
+ | </div> | ||
+ | </div> | ||
+ | </a> | ||
+ | <a href="parts.html"> | ||
+ | <div id="onenav"> | ||
+ | <h3 alt="Parts" class="navtitle">Parts</h3> | ||
+ | <div id="smallnav" class="smallnavs"> | ||
+ | <br><br><br><br> | ||
+ | Parts | ||
+ | </div> | ||
+ | </div> | ||
+ | </a> | ||
+ | <a href="modeling.html"> | ||
+ | <div id="onenav"> | ||
+ | <h3 alt="Modeling" class="navtitle">Modeling</h3> | ||
+ | <div id="smallnav" class="smallnavs"> | ||
+ | <br><br><br> | ||
+ | Overview | ||
+ | <br><br> | ||
+ | Date analysis | ||
+ | </div> | ||
+ | </div> | ||
+ | </a> | ||
+ | <a href="project.html"> | ||
+ | <div id="onenav"> | ||
+ | <h3 alt="Project" class="navtitle">Project</h3> | ||
+ | <div id="smallnav" class="smallnavs"> | ||
+ | <br> | ||
+ | Background | ||
+ | <br><br> | ||
+ | Design | ||
+ | <br><br> | ||
+ | Result | ||
+ | <br><br> | ||
+ | Protocal | ||
+ | </div> | ||
+ | </div> | ||
+ | </a> | ||
+ | <div id="onenav"> | ||
+ | <h3 alt="Home">Home</h3> | ||
+ | <div id="smallnav" class="appear"></div> | ||
+ | </div> | ||
+ | |||
</div> | </div> | ||
− | <div id=" | + | <div id="smallslider"> |
− | < | + | <div id="onesmallslider" class="smallslider1"> |
− | < | + | <h2>失败是成功之母</h2> |
− | < | + | <div id="smallsliderimg"> |
− | + | <img src="https://static.igem.org/mediawiki/2016/c/c9/Jsnuchina_img_slider2.png" style="width:70%;height:250px;margin:18px 0 0 13%" > | |
− | + | </div> | |
− | + | </div> | |
− | + | <div id="onesmallslider" class="smallslider2"> | |
− | + | <h2>这是我的一小步,确是人类的一大步</h2> | |
− | </ | + | <div id="smallsliderimg"> |
− | < | + | <img src="https://static.igem.org/mediawiki/2016/9/9e/Jsnuchina_img_slider3.png |
− | + | " style="width:70%;height:250px;margin:18px 0 0 13%" > | |
− | " style="width: | + | </div> |
− | </ | + | </div> |
+ | <div id="onesmallslider" class="smallslider3"> | ||
+ | <h2>早起的鸟儿有虫吃</h2> | ||
+ | <div id="smallsliderimg"> | ||
+ | <img src="https://static.igem.org/mediawiki/2016/5/5b/Jsnuchina_img_slider6.png" style="width:70%;height:250px;margin:18px 0 0 13%" > | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div id="slider"> | ||
+ | <div id="oneslider" class="slider1"> | ||
+ | <h3>失败是成功之母</h3> | ||
+ | <div id="sliderleft"> | ||
+ | <img src="https://static.igem.org/mediawiki/2016/f/f7/Jsnuchina_img_slider1.png" style="width:70%;height:250px;margin:18px 0 0 13%" > | ||
+ | </div> | ||
+ | <div id="sliderright"> | ||
+ | <img src="https://static.igem.org/mediawiki/2016/c/c9/Jsnuchina_img_slider2.png" style="width:70%;height:250px;margin:18px 0 0 13%" > | ||
+ | </div> | ||
+ | </div> | ||
+ | <div id="oneslider" class="slider2"> | ||
+ | <h3>这是我的一小步,确是人类的一大步</h3> | ||
+ | <div id="sliderleft"> | ||
+ | <img src="https://static.igem.org/mediawiki/2016/9/9e/Jsnuchina_img_slider3.png | ||
+ | " style="width:70%;height:250px;margin:18px 0 0 13%" > | ||
+ | </div> | ||
+ | <div id="sliderright"> | ||
+ | <img src="https://static.igem.org/mediawiki/2016/f/f3/Jsnuchina_img_slider4.png" style="width:70%;height:250px;margin:18px 0 0 13%" > | ||
+ | </div> | ||
+ | </div> | ||
+ | <div id="oneslider" class="slider3"> | ||
+ | <h3>早起的鸟儿有虫吃</h3> | ||
+ | <div id="sliderleft"> | ||
+ | <img src="https://static.igem.org/mediawiki/2016/e/e2/Jsnuchina_img_slider5.png" style="width:70%;height:250px;margin:18px 0 0 13%" > | ||
+ | </div> | ||
+ | <div id="sliderright"> | ||
+ | <img src="https://static.igem.org/mediawiki/2016/5/5b/Jsnuchina_img_slider6.png" style="width:70%;height:250px;margin:18px 0 0 13%" > | ||
+ | </div> | ||
+ | </div> | ||
</div> | </div> | ||
</div> | </div> | ||
− | <div id="content | + | <div id="content"></div> |
− | + | ||
− | + | <script src="https://2016.igem.org/Team:JSNU-China/jquery" ></script> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | |||
<script> | <script> | ||
− | function | + | $(function(){ |
− | $("#" | + | $(".navlogo").click(function(){ |
− | + | $("#smallnavs").toggle() | |
+ | }) | ||
+ | }) | ||
+ | $(function(){ | ||
+ | $(".smalltitle").on("mouseover",function(){ | ||
+ | $(this).siblings("#smallnavselect").addClass("smallnavmouse"); | ||
+ | $(this).siblings("#smallnavselect").removeClass("smallnavmouseout"); | ||
− | + | }) | |
− | + | ||
− | } | + | $(".smalltitle").on("mouseout",function(){ |
+ | $(this).siblings("#smallnavselect").addClass("smallnavmouseout"); | ||
+ | $(this).siblings("#smallnavselect").removeClass("smallnavmouse"); | ||
+ | |||
+ | }) | ||
+ | }) | ||
</script> | </script> | ||
− | </body> | + | <script> |
+ | $(function(){ | ||
+ | $(".navtitle").on("mouseover",function(){ | ||
+ | $(this).text(""); | ||
+ | $(this).siblings(".smallnavs").css("display","block"); | ||
+ | }); | ||
+ | |||
+ | |||
+ | $(".smallnavs").on("mouseout",function(){ | ||
+ | $(this).css("display","none"); | ||
+ | $navtitle=$(this).siblings("h3").attr("alt"); | ||
+ | $(this).siblings("h3").text($navtitle); | ||
+ | }) | ||
+ | |||
+ | }) | ||
+ | |||
+ | </script> | ||
+ | <script> | ||
+ | $(function(){ | ||
+ | if($(window).width()<=992){ | ||
+ | $(".smallslider1").css("left","0"); | ||
+ | $(".smallslider2").css("left","100%"); | ||
+ | $(".smallslider3").css("left","100%"); | ||
+ | |||
+ | setTimeout(function(){ | ||
+ | smallslidershow(1); | ||
+ | },3000); | ||
+ | |||
+ | function smallslidershow(num){ | ||
+ | |||
+ | number1=parseInt(num); | ||
+ | number2=number1+1; | ||
+ | |||
+ | if (number2==4) { | ||
+ | number2=1; | ||
+ | } | ||
+ | $(".smallslider"+number1).animate({left:"-100%"},1000,function(){ | ||
+ | $(".smallslider"+number1).css("left","100%"); | ||
+ | }); | ||
+ | |||
+ | $(".smallslider"+number2).animate({left:"0"},1000,function(){ | ||
+ | setTimeout(function(){ | ||
+ | smallslidershow(number2); | ||
+ | },3000); | ||
+ | }); | ||
+ | |||
+ | } | ||
+ | } | ||
+ | }) | ||
+ | </script> | ||
+ | <script> | ||
+ | $(function(){ | ||
+ | if($(window).width()>992){ | ||
+ | $(".slider1").css("left","0"); | ||
+ | $(".slider2").css("left","100%"); | ||
+ | $(".slider3").css("left","100%"); | ||
+ | |||
+ | setTimeout(function(){ | ||
+ | slidershow(1); | ||
+ | },3000); | ||
+ | |||
+ | function slidershow(num){ | ||
+ | |||
+ | number1=parseInt(num); | ||
+ | number2=number1+1; | ||
+ | |||
+ | if (number2==4) { | ||
+ | number2=1; | ||
+ | } | ||
+ | $(".slider"+number1).animate({left:"-100%"},1000,function(){ | ||
+ | $(".slider"+number1).css("left","100%"); | ||
+ | }); | ||
+ | |||
+ | $(".slider"+number2).animate({left:"0"},1000,function(){ | ||
+ | setTimeout(function(){ | ||
+ | slidershow(number2); | ||
+ | },3000); | ||
+ | }); | ||
+ | |||
+ | } | ||
+ | } | ||
+ | }) | ||
+ | </script> | ||
+ | </body> | ||
</html> | </html> |
Revision as of 12:37, 5 September 2016