Difference between revisions of "Team:SZU-China/HP Demo"
Xiexiaohan (Talk | contribs) |
|||
| Line 5: | Line 5: | ||
</head> | </head> | ||
| + | |||
| Line 19: | Line 20: | ||
</div> | </div> | ||
<div class="row"> | <div class="row"> | ||
| − | <div class="col-lg-4 col-md-10 offset- | + | <div class="col-lg-4 col-md-10 offset-1"> |
<div class="row"></div> | <div class="row"></div> | ||
<div class="text-center" style="overflow: hidden;width: 100%;height: 500px;padding-top: 20px" class="hh"> | <div class="text-center" style="overflow: hidden;width: 100%;height: 500px;padding-top: 20px" class="hh"> | ||
| Line 79: | Line 80: | ||
<div class="box small_dot"></div> | <div class="box small_dot"></div> | ||
<img src="https://static.igem.org/mediawiki/2018/0/00/T--SZU-China--HP-gif1.gif" id="gif_bg1" class="gif_bg" width="550px" height="400px" style="border-radius: 50%;margin-left: -40px" /> | <img src="https://static.igem.org/mediawiki/2018/0/00/T--SZU-China--HP-gif1.gif" id="gif_bg1" class="gif_bg" width="550px" height="400px" style="border-radius: 50%;margin-left: -40px" /> | ||
| − | <img src="https://static.igem.org/mediawiki/2018/2/26/T--SZU-China--HP-gif2.gif" id="gif_bg2" class="gif_bg" width="550px" height="400px" style="border-radius: 50%;margin-left: -40px" /> | + | <img src="https://static.igem.org/mediawiki/2018/2/26/T--SZU-China--HP-gif2.gif" id="gif_bg2" class="gif_bg" width="550px" height="400px" style="border-radius: 50%;margin-left: -40px;display: none" /> |
| − | <img src="https://static.igem.org/mediawiki/2018/8/8c/T--SZU-China--HP-gif3.gif" id="gif_bg3" class="gif_bg" width="550px" height="400px" style="border-radius: 50%;margin-left: -40px" /> | + | <img src="https://static.igem.org/mediawiki/2018/8/8c/T--SZU-China--HP-gif3.gif" id="gif_bg3" class="gif_bg" width="550px" height="400px" style="border-radius: 50%;margin-left: -40px;display: none" /> |
| − | <img src="https://static.igem.org/mediawiki/2018/a/ae/T--SZU-China--HP-gif4.gif" id="gif_bg4" class="gif_bg" width="550px" height="400px" style="border-radius: 50%;margin-left: -40px" /> | + | <img src="https://static.igem.org/mediawiki/2018/a/ae/T--SZU-China--HP-gif4.gif" id="gif_bg4" class="gif_bg" width="550px" height="400px" style="border-radius: 50%;margin-left: -40px;display: none" /> |
| − | <img src="https://static.igem.org/mediawiki/2018/0/03/T--SZU-China--HP-gif5.gif" id="gif_bg5" class="gif_bg" width="550px" height="400px" style="border-radius: 50%;margin-left: -40px" /> | + | <img src="https://static.igem.org/mediawiki/2018/0/03/T--SZU-China--HP-gif5.gif" id="gif_bg5" class="gif_bg" width="550px" height="400px" style="border-radius: 50%;margin-left: -40px;display: none" /> |
| − | <img src="https://static.igem.org/mediawiki/2018/f/fc/T--SZU-China--HP-gif6.gif" id="gif_bg6" class="gif_bg" width="550px" height="400px" style="border-radius: 50%;margin-left: -40px" /> | + | <img src="https://static.igem.org/mediawiki/2018/f/fc/T--SZU-China--HP-gif6.gif" id="gif_bg6" class="gif_bg" width="550px" height="400px" style="border-radius: 50%;margin-left: -40px;display: none" /> |
<script> | <script> | ||
///新增 | ///新增 | ||
| + | |||
| + | |||
| + | $("#kuang_title h2").click(function(event){ | ||
| + | return false;//阻止事件冒泡即可 | ||
| + | }); | ||
var i=1; | var i=1; | ||
$(".row").click(function () { | $(".row").click(function () { | ||
| Line 91: | Line 97: | ||
$("#gif_bg"+i).hide(); | $("#gif_bg"+i).hide(); | ||
| + | $("#content"+i).hide(); | ||
| + | |||
i = (i+1); | i = (i+1); | ||
if(i==7) i=1; | if(i==7) i=1; | ||
$("#gif_bg"+i).show(); | $("#gif_bg"+i).show(); | ||
| + | $("#content"+i).show(); | ||
if(i==1) | if(i==1) | ||
$("#gif_bg"+i).attr("src","https://static.igem.org/mediawiki/2018/0/00/T--SZU-China--HP-gif1.gif"); | $("#gif_bg"+i).attr("src","https://static.igem.org/mediawiki/2018/0/00/T--SZU-China--HP-gif1.gif"); | ||
| Line 156: | Line 165: | ||
<div style="height:400px;float:right;z-index: 100;position: relative;padding-left: 30px; color: white; font-size: 20px;" id="content1" class="content1"> | <div style="height:400px;float:right;z-index: 100;position: relative;padding-left: 30px; color: white; font-size: 20px;" id="content1" class="content1"> | ||
<div style="height: 40px;width: 100%;margin: 0 auto;font-size: 25px;text-align: center"> | <div style="height: 40px;width: 100%;margin: 0 auto;font-size: 25px;text-align: center"> | ||
| − | <span class="kuang_title h2" ><a style="color: #3880A0;" href="https://2018.igem.org/Team:SZU-China/Applet">Applet</a></span> | + | <span class="kuang_title h2" id="title1"><a style="color: #3880A0;" href="https://2018.igem.org/Team:SZU-China/Applet">Applet</a></span> |
</div> | </div> | ||
<div class="card h-50 align-middle" style="background-color: #3880A0;width: 100%; padding-top: 10px;margin-top: 50px;"> | <div class="card h-50 align-middle" style="background-color: #3880A0;width: 100%; padding-top: 10px;margin-top: 50px;"> | ||
| Line 171: | Line 180: | ||
<div style="height:400px;float:right;z-index: 100;position: relative;padding-left: 30px;display: none; color: white; font-size: 20px;" id="content2" class="content1"> | <div style="height:400px;float:right;z-index: 100;position: relative;padding-left: 30px;display: none; color: white; font-size: 20px;" id="content2" class="content1"> | ||
<div style="height: 40px;width: 100%;margin: 0 auto;font-size: 25px;text-align: center"> | <div style="height: 40px;width: 100%;margin: 0 auto;font-size: 25px;text-align: center"> | ||
| − | <span class="kuang_title h2" ><a style="color: #3880A0;" href="https://2018.igem.org/Team:SZU-China/MeetUp">Meetup</a></span> | + | <span class="kuang_title h2" id="title2"><a style="color: #3880A0;" href="https://2018.igem.org/Team:SZU-China/MeetUp">Meetup</a></span> |
</div> | </div> | ||
<div class="card h-50" style="background-color: #3880A0;width: 100%;height: 100px;padding-top: 10px;margin-top: 20px"> | <div class="card h-50" style="background-color: #3880A0;width: 100%;height: 100px;padding-top: 10px;margin-top: 20px"> | ||
| Line 186: | Line 195: | ||
<div style="height:400px;float:right;z-index: 100;position: relative;padding-left: 30px;display: none; color: white; font-size: 20px;" id="content3" class="content1"> | <div style="height:400px;float:right;z-index: 100;position: relative;padding-left: 30px;display: none; color: white; font-size: 20px;" id="content3" class="content1"> | ||
<div style="height: 40px;width: 100%;margin: 0 auto;font-size: 25px;text-align: center"> | <div style="height: 40px;width: 100%;margin: 0 auto;font-size: 25px;text-align: center"> | ||
| − | <span class="kuang_title h2" ><a style="color: #3880A0;" href="https://2018.igem.org/Team:SZU-China/Investigation">Investigation</a></span> | + | <span class="kuang_title h2" id="title3"><a style="color: #3880A0;" href="https://2018.igem.org/Team:SZU-China/Investigation">Investigation</a></span> |
</div> | </div> | ||
<div class="card h-50" style="background-color: #3880A0;width: 100%;height: 100px;padding-top: 10px;margin-top: 20px"> | <div class="card h-50" style="background-color: #3880A0;width: 100%;height: 100px;padding-top: 10px;margin-top: 20px"> | ||
| Line 201: | Line 210: | ||
<div style="height:400px;float:right;z-index: 100;position: relative;padding-left: 30px;display: none; color: white; font-size: 20px;" id="content4" class="content1"> | <div style="height:400px;float:right;z-index: 100;position: relative;padding-left: 30px;display: none; color: white; font-size: 20px;" id="content4" class="content1"> | ||
<div style="height: 40px;width: 100%;margin: 0 auto;font-size: 25px;text-align: center"> | <div style="height: 40px;width: 100%;margin: 0 auto;font-size: 25px;text-align: center"> | ||
| − | <span class="kuang_title h2" ><a style="color: #3880A0;" href="https://2018.igem.org/Team:SZU-China/Simulation">Simulation</a></span> | + | <span class="kuang_title h2" id="title4"><a style="color: #3880A0;" href="https://2018.igem.org/Team:SZU-China/Simulation">Simulation</a></span> |
</div> | </div> | ||
<div class="card h-50" style="background-color: #3880A0;width: 100%;height: 100px;padding-top: 10px;margin-top: 20px"> | <div class="card h-50" style="background-color: #3880A0;width: 100%;height: 100px;padding-top: 10px;margin-top: 20px"> | ||
| Line 216: | Line 225: | ||
<div style="height:400px;float:right;z-index: 100;position: relative;padding-left: 30px;display: none; color: white; font-size: 20px;" id="content5" class="content1"> | <div style="height:400px;float:right;z-index: 100;position: relative;padding-left: 30px;display: none; color: white; font-size: 20px;" id="content5" class="content1"> | ||
<div style="height: 40px;width: 100%;margin: 0 auto;font-size: 25px;text-align: center"> | <div style="height: 40px;width: 100%;margin: 0 auto;font-size: 25px;text-align: center"> | ||
| − | <span class="kuang_title h2" ><a style="color: #3880A0;" href="https://2018.igem.org/Team:SZU-China/Public_Engagement">Education & public engagement</a></span> | + | <span class="kuang_title h2" id="title5"><a style="color: #3880A0;" href="https://2018.igem.org/Team:SZU-China/Public_Engagement">Education & public engagement</a></span> |
</div> | </div> | ||
<div class="card h-50" style="background-color: #3880A0;width: 100%;height: 100px;padding-top: 10px;margin-top: 20px"> | <div class="card h-50" style="background-color: #3880A0;width: 100%;height: 100px;padding-top: 10px;margin-top: 20px"> | ||
| Line 231: | Line 240: | ||
<div style="height:400px;float:right;z-index: 100;position: relative;padding-left: 30px;display: none; color: white; font-size: 20px;" id="content6" class="content1"> | <div style="height:400px;float:right;z-index: 100;position: relative;padding-left: 30px;display: none; color: white; font-size: 20px;" id="content6" class="content1"> | ||
<div style="height: 40px;width: 100%;margin: 0 auto;font-size: 25px;text-align: center"> | <div style="height: 40px;width: 100%;margin: 0 auto;font-size: 25px;text-align: center"> | ||
| − | <span class="kuang_title h2" ><a style="color: #3880A0;" href="https://2018.igem.org/Team:SZU-China/Prospect">Prospect</a></span> | + | <span class="kuang_title h2" id="title6"><a style="color: #3880A0;" href="https://2018.igem.org/Team:SZU-China/Prospect">Prospect</a></span> |
</div> | </div> | ||
<div class="card h-50" style="background-color: #3880A0;width: 100%;height: 100px;padding-top: 10px;margin-top: 20px"> | <div class="card h-50" style="background-color: #3880A0;width: 100%;height: 100px;padding-top: 10px;margin-top: 20px"> | ||
| Line 250: | Line 259: | ||
</body> | </body> | ||
| − | |||
<script type="text/javascript"> | <script type="text/javascript"> | ||
| Line 265: | Line 273: | ||
}); | }); | ||
</script> | </script> | ||
| + | |||
| + | |||
| + | |||
</html> | </html> | ||
Revision as of 15:37, 17 October 2018
Human Practices
At the beginning of 2018 SZU-China team, we had a brainstorming to decide our topic. We carried out three topics which were all close to daily lives and we didn’t know which to choose.
To strengthen the communication between iGEM and the public, we designed an applet named biocompany and post our ideas there. It’s a platform for the public to engage in the iGEM.
With the comments that people gave in Biocompany, we finally decided our project, cockroach terminator. For more details about our applet, please read our applet part.