|
|
| Line 64: |
Line 64: |
| | <body class="scoll_dis"> | | <body class="scoll_dis"> |
| | <!-- 导航栏 start --> | | <!-- 导航栏 start --> |
| − | <ul id="left-nav">
| |
| − | <li>
| |
| − | <a>PROJECT</a>
| |
| − | <ul>
| |
| − | <li><a href="https://2018.igem.org/Team:BIT-China/Background">Background</a></li>
| |
| − | <li><a href="https://2018.igem.org/Team:BIT-China/Description">Description</a></li>
| |
| − | <li><a href="https://2018.igem.org/Team:BIT-China/Design">Idea & Design</a></li>
| |
| − | </ul>
| |
| − | </li>
| |
| | | | |
| − | <li>
| |
| − | <a>EXPERIMENTS</a>
| |
| − | <ul>
| |
| − | <li><a href="https://2018.igem.org/Team:BIT-China/ExperimentsRegulator">Regulator</a></li>
| |
| − | <li><a href="https://2018.igem.org/Team:BIT-China/ExperimentsFeedback">Feedback</a></li>
| |
| − | <li><a href="https://2018.igem.org/Team:BIT-China/ExperimentsOutput">Output</a></li>
| |
| − | <li><a href="https://2018.igem.org/Team:BIT-China/ExperimentsInput">Input</a></li>
| |
| − | </ul>
| |
| − | </li>
| |
| − |
| |
| − | <li>
| |
| − | <a>MODELING</a>
| |
| − | <ul>
| |
| − | <li><a href="https://2018.igem.org/Team:BIT-China/Model">Overview</a></li>
| |
| − | <li><a href="https://2018.igem.org/Team:BIT-China/H2O2DecompositionModel">H<sub>2</sub>O<sub>2</sub>
| |
| − | Decomposition Model</a></li>
| |
| − | <li><a href="https://2018.igem.org/Team:BIT-China/FluorescentProbesModel">Fluorescent Probes Model </a></li>
| |
| − | <li><a href="https://2018.igem.org/Team:BIT-China/NernstEquilibriumModel">Nernst Equilibrium Model</a></li>
| |
| − | </ul>
| |
| − | </li>
| |
| − |
| |
| − | <li>
| |
| − | <a>HUMAN PRACTICES</a>
| |
| − | <ul>
| |
| − | <li><a href="https://2018.igem.org/Team:BIT-China/Human_Practices">Integrated Human Practices</a></li>
| |
| − | <li><a href="https://2018.igem.org/Team:BIT-China/Public_Engagement">Education & Public Engagement</a></li>
| |
| − | <li><a href="https://2018.igem.org/Team:BIT-China/Collaborations">Collaborations</a></li>
| |
| − | </ul>
| |
| − | </li>
| |
| − |
| |
| − | <li>
| |
| − | <a>NOTEBOOK</a>
| |
| − | <ul>
| |
| − | <li><a href="https://2018.igem.org/Team:BIT-China/Notebook">Lab Book</a></li>
| |
| − | <li><a href="https://2018.igem.org/Team:BIT-China/Protocols">Methodology / Protocols</a></li>
| |
| − | <li><a href="https://2018.igem.org/Team:BIT-China/Equipment">Material & Equipment</a></li>
| |
| − | <li><a href="https://2018.igem.org/Team:BIT-China/InterLab">Measurement / InterLab</a></li>
| |
| − | <li><a href="https://2018.igem.org/Team:BIT-China/Safety">Safety</a></li>
| |
| − | </ul>
| |
| − | </li>
| |
| − |
| |
| − | <li>
| |
| − | <a>ACHIEVEMENTS</a>
| |
| − | <ul>
| |
| − | <li><a href="https://2018.igem.org/Team:BIT-China/JudgingForm">Judging Form</a></li>
| |
| − | <li><a href="https://2018.igem.org/Team:BIT-China/Improve">Parts</a></li>
| |
| − | <li><a href="https://2018.igem.org/Team:BIT-China/Demonstrate">Demonstrate</a></li>
| |
| − | </ul>
| |
| − | </li>
| |
| − |
| |
| − | <li>
| |
| − | <a>TEAM</a>
| |
| − | <ul>
| |
| − | <li><a href="https://2018.igem.org/Team:BIT-China/Team">Members</a></li>
| |
| − | <li><a href="https://2018.igem.org/Team:BIT-China/Attributions">Attributions</a></li>
| |
| − | <li><a href="https://2018.igem.org/Team:BIT-China/Gallery">Gallery</a></li>
| |
| − | </ul>
| |
| − | </li>
| |
| − | </ul>
| |
| − |
| |
| − | <a href="https://2018.igem.org/Team:BIT-China"><img id="imgA" class="imgA-new-pos" src="https://static.igem.org/mediawiki/2018/4/46/T--BIT-China--iGEM2018-A_img.png" /></a>
| |
| − | <!-- end -->
| |
| − |
| |
| − | <div id="dowebok">
| |
| − | <div id="home_section_0" class="section">
| |
| − | <img src="https://static.igem.org/mediawiki/2018/2/29/T--BIT-China--iGEM2018-HOME-BG.jpg" style="position: absolute;top:0;left:0;height:100vh;width:100vw;z-index:5;pointer-events: none;">
| |
| − |
| |
| − | <img id="gifA" src="https://static.igem.org/mediawiki/2018/f/f3/T--BIT-China--iGEM2018-HOME-A.gif" style="position:absolute;top:calc(50vh - 148px);left:calc(50vw - 292px);height: 295px;width: 583px;z-index: 5;pointer-events: none;">
| |
| − | </div>
| |
| − |
| |
| − | <div id="home_section_1" class="section">
| |
| − | <img id="img1-1" style="z-index: 1;position: absolute;right:-5px;top: -5px;bottom:-5px;height: 100vh;width: 80vw;"
| |
| − | src="https://static.igem.org/mediawiki/2018/2/2f/T--BIT-China--iGEM2018-home.png">
| |
| − | <img id="img1-2" style="z-index: 0;position: absolute;left:calc(50vw - 350px);bottom:calc(50vh - 300px);height: 260px;width: 600px;"
| |
| − | src="https://static.igem.org/mediawiki/2018/f/f4/T--BIT-China--iGEM2018-wordcut2.png">
| |
| − |
| |
| − | <div id="text1" style="z-index:1;position: absolute;left:calc(50vw - 250px);bottom:calc(50vh - 250px);">
| |
| − | <p class="p_style" style="width:350px;">
| |
| − | <font size="5" face="kg_second_chances_solidRg">“A”</font> indicates antioxidant, and can also
| |
| − | represent the best in the grade rating. So the core of our project is to build an antioxidant
| |
| − | detecting system to rank antioxidants.
| |
| − | </p>
| |
| − | </div>
| |
| − |
| |
| − | <img id="down1" onclick="arr_down()" class="down-arrow-style" src="https://static.igem.org/mediawiki/2018/2/2a/T--BIT-China--iGEM2018-down_arrow.svg">
| |
| − | </div>
| |
| − |
| |
| − | <div id="home_section_2" class="section">
| |
| − | <img id="img2-1" style="z-index: 2;position: absolute;left: calc(50vw - 400px);top: calc(50vh - 350px);height: 500px;width: 500px; transform:rotate(1deg);"
| |
| − | src="https://static.igem.org/mediawiki/2018/d/da/T--BIT-China--iGEM2018-img_home_4.png">
| |
| − | <img id="img2-2" style="z-index: 1;position: absolute;left: calc(50vw - 120px);top: calc(50vh - 225px);height: 400px;width: 600px;"
| |
| − | src="https://static.igem.org/mediawiki/2018/a/a6/T--BIT-China--iGEM2018-img_home_3.png">
| |
| − |
| |
| − | <div id="text2" style="position: absolute;left:calc(50vw - 365px);top:calc(50vh + 135px);">
| |
| − | <p class="p_style" style="width:520px;">
| |
| − | <font size="5" face="kg_second_chances_solidRg">Antioxidants</font> are <br>compounds that inhibit
| |
| − | oxidation.They can scavenge the excess ROS in the organisms. The antioxidants mentioned here is the
| |
| − | one working in our bodies, helping us defect the damage of oxidation.
| |
| − | </p>
| |
| − | </div>
| |
| − |
| |
| − | <img id="down2" onclick="arr_down()" class="down-arrow-style" src="https://static.igem.org/mediawiki/2018/2/2a/T--BIT-China--iGEM2018-down_arrow.svg">
| |
| − | </div>
| |
| − |
| |
| − | <div id="home_section_3" class="section">
| |
| − | <img id="img3" style="z-index: 2;position:absolute;left:calc(50vw - 320px);top:calc(50vh - 280px);height: 500px;width: 500px;"
| |
| − | src="https://static.igem.org/mediawiki/2018/6/6c/T--BIT-China--iGEM2018-home-3.png">
| |
| − |
| |
| − | <div id="text3" style="position: absolute;left:calc(50vw + 200px);top:calc(50vh - 60px);">
| |
| − | <p class="p_style" style="width:360px;">
| |
| − | <font size="5" face="kg_second_chances_solidRg">Oxidation</font> damage is very common in our daily
| |
| − | life. It may be caused by UV in the sun, unhealthy living habits, irregular work and rest times,
| |
| − | and its accumulation will eventually infect the normal function of our body, lead to gene mutation,
| |
| − | cell cancer and aging. Therefore, antioxidants are urgently needed to defended the damage of
| |
| − | oxidation.
| |
| − | </p>
| |
| − | </div>
| |
| − |
| |
| − | <img id="down3" onclick="arr_down()" class="down-arrow-style" src="https://static.igem.org/mediawiki/2018/2/2a/T--BIT-China--iGEM2018-down_arrow.svg">
| |
| − | </div>
| |
| − |
| |
| − | <div id="home_section_4" class="section">
| |
| − | <img id="img4" style="z-index: 2;position: absolute;right: calc(50vw - 480px);top: calc(50vh - 280px);height: 500px;width: 500px;"
| |
| − | src="https://static.igem.org/mediawiki/2018/1/1e/T--BIT-China--iGEM2018-home-4.png">
| |
| − |
| |
| − | <div id="text4" style="position: absolute;right:calc(50vw - 40px);top:calc(50vh - 30px);">
| |
| − | <p class="p_style" style="width:300px;">
| |
| − | <font size="5" face="kg_second_chances_solidRg">Even</font> though antioxidant is so important,
| |
| − | there’s no standard ways to tell us which antioxidant works better.
| |
| − | </p>
| |
| − | </div>
| |
| − |
| |
| − | <img id="down4" onclick="arr_down()" class="down-arrow-style" src="https://static.igem.org/mediawiki/2018/2/2a/T--BIT-China--iGEM2018-down_arrow.svg">
| |
| − | </div>
| |
| − |
| |
| − | <div id="home_section_5" class="section">
| |
| − | <img id="img5" style="z-index: 2;position: absolute;left: 32vw;top: calc(50vh - 290px);height: 400px;width: 600px;"
| |
| − | src="https://static.igem.org/mediawiki/2018/5/55/T--BIT-China--iGEM2018-home-5.png">
| |
| − |
| |
| − | <div id="text5-1" style="position: absolute;left:calc(50vw - 270px);top:calc(50vh + 120px);">
| |
| − | <p class="p_style" style="width:640px;">
| |
| − | <font size="5" face="kg_second_chances_solidRg">Our</font> goal is to build a system with function
| |
| − | of detecting the antioxidants and has the advantages of high biological relevance, simple
| |
| − | operation, low-cost, good reproducibility, accuracy, and high sensitivity for antioxidant
| |
| − | detection. More importantly, we hope to establish an efficient standard for evaluating antioxidants
| |
| − | through our system
| |
| − | </p>
| |
| − | </div>
| |
| − |
| |
| − | <img id="down5" class="down-arrow-style" src="https://static.igem.org/mediawiki/2018/1/19/T--BIT-China--iGEM2018-horizon.svg"
| |
| − | style="pointer-events:none;">
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − | <img id="top-img" onclick="top_up()" src="https://static.igem.org/mediawiki/2018/3/34/T--BIT-China--iGEM2018-top_img.png">
| |
| − |
| |
| − | <script src="https://2018.igem.org/Template:BIT-China/js/jquery-min?action=raw&ctype=text/javascript"></script>
| |
| − | <!-- 导航栏 -->
| |
| − | <script src="https://2018.igem.org/Template:BIT-China/js/copy-tendina?action=raw&ctype=text/javascript"></script>
| |
| − | <script>
| |
| − | $('#left-nav').tendina({
| |
| − | animate: true,
| |
| − | speed: 400, // 下拉时间
| |
| − | })
| |
| − | </script>
| |
| − | <!-- fullPage -->
| |
| − | <script src="https://2018.igem.org/Template:BIT-China/js/jquery-fullPage-min?action=raw&ctype=text/javascript"></script>
| |
| − | <script>
| |
| − | var left_side = document.getElementById('left-nav'),
| |
| − | imgA = document.getElementById('imgA'),
| |
| − | gifA = document.getElementById('gifA'),
| |
| − | top_img = document.getElementById('top-img');
| |
| − |
| |
| − | var img1_1 = document.getElementById('img1-1'),
| |
| − | img1_2 = document.getElementById('img1-2'),
| |
| − | text1 = document.getElementById('text1'),
| |
| − | down1 = document.getElementById('down1');
| |
| − |
| |
| − | var img2_1 = document.getElementById('img2-1'),
| |
| − | img2_2 = document.getElementById('img2-2'),
| |
| − | text2 = document.getElementById('text2'),
| |
| − | down2 = document.getElementById('down2');
| |
| − |
| |
| − | var img3 = document.getElementById('img3'),
| |
| − | text3 = document.getElementById('text3'),
| |
| − | down3 = document.getElementById('down3');
| |
| − |
| |
| − | var img4 = document.getElementById('img4'),
| |
| − | text4 = document.getElementById('text4'),
| |
| − | down4 = document.getElementById('down4');
| |
| − |
| |
| − | var img5 = document.getElementById('img5'),
| |
| − | text5_1 = document.getElementById('text5-1'),
| |
| − | down5 = document.getElementById('down5');
| |
| − |
| |
| − | function arr_down() {
| |
| − | $.fn.fullpage.moveSectionDown();
| |
| − | }
| |
| − |
| |
| − | function top_up() {
| |
| − | $.fn.fullpage.moveTo(1);
| |
| − | };
| |
| − | </script>
| |
| − | <script>
| |
| − | $(function () {
| |
| − | $('#dowebok').fullpage({
| |
| − | 'scrollingSpeed': 1000,
| |
| − | //'navigation': true, // 显示滚动圆点
| |
| − | 'anchors': [], // anchors参数防止在火狐浏览器中一次滚动到底部
| |
| − | 'afterRender': function () { // 页面初始化完成后的回调函数
| |
| − | left_side.style.opacity = 0;
| |
| − | left_side.style.pointerEvents = "none";
| |
| − |
| |
| − | imgA.style.opacity = 0;
| |
| − | imgA.style.pointerEvents = "none";
| |
| − |
| |
| − | top_img.style.opacity = 0;
| |
| − | top_img.style.pointerEvents = "none";
| |
| − | top_img.classList.add('top-style');
| |
| − | },
| |
| − | 'onLeave': function (index, nextIndex, direction) { // 滚动前的回调函数
| |
| − | if (nextIndex == 1) {
| |
| − | left_side.style.opacity = 0;
| |
| − | left_side.style.pointerEvents = "none";
| |
| − | left_side.classList.remove('imgA-nav-gradient');
| |
| − | left_side.classList.add('imgA-nav-gradient-back');
| |
| − |
| |
| − | imgA.style.opacity = 0;
| |
| − | imgA.style.pointerEvents = "none";
| |
| − | imgA.classList.remove('imgA-nav-gradient');
| |
| − | imgA.classList.add('imgA-nav-gradient-back');
| |
| − |
| |
| − | top_img.style.opacity = 0;
| |
| − | top_img.pointerEvents = "none";
| |
| − | top_img.classList.remove('imgA-nav-gradient');
| |
| − | top_img.classList.add('imgA-nav-gradient-back');
| |
| − |
| |
| − | gifA.classList.remove('gifA-move');
| |
| − | gifA.classList.add('gifA-move-back');
| |
| − |
| |
| − | }
| |
| − | if (nextIndex == 2) {
| |
| − | img1_1.classList.remove('right-move-back');
| |
| − | img1_2.classList.remove('imgA-nav-gradient-back');
| |
| − | text1.classList.remove('imgA-nav-gradient-back');
| |
| − | down1.classList.remove('imgA-nav-gradient-back');
| |
| − |
| |
| − | img1_1.classList.add('right-move');
| |
| − | img1_2.classList.add('imgA-nav-gradient');
| |
| − | text1.classList.add('imgA-nav-gradient');
| |
| − | down1.classList.add('imgA-nav-gradient');
| |
| − | }
| |
| − |
| |
| − | if (nextIndex == 3) {
| |
| − | img2_1.classList.remove('table-rotate-back');
| |
| − | img2_2.classList.remove('right-up-come-back');
| |
| − | text2.classList.remove('left-come-back');
| |
| − | down2.classList.remove('imgA-nav-gradient-back');
| |
| − |
| |
| − | img2_1.classList.add('table-rotate');
| |
| − | img2_2.classList.add('right-up-come');
| |
| − | text2.classList.add('left-come');
| |
| − | down2.classList.add('imgA-nav-gradient');
| |
| − | }
| |
| − |
| |
| − | if (nextIndex == 4) {
| |
| − | img3.classList.remove('bear-swing-back');
| |
| − | text3.classList.remove('imgA-nav-gradient-back');
| |
| − | down3.classList.remove('imgA-nav-gradient-back');
| |
| − |
| |
| − | img3.classList.add('bear-swing');
| |
| − | text3.classList.add('imgA-nav-gradient');
| |
| − | down3.classList.add('imgA-nav-gradient');
| |
| − | }
| |
| − |
| |
| − | if (nextIndex == 5) {
| |
| − | img4.classList.remove('bear-swing-back');
| |
| − | text4.classList.remove('imgA-nav-gradient-back');
| |
| − | down4.classList.remove('imgA-nav-gradient-back');
| |
| − |
| |
| − | img4.classList.add('bear-swing');
| |
| − | text4.classList.add('imgA-nav-gradient');
| |
| − | down4.classList.add('imgA-nav-gradient');
| |
| − | }
| |
| − |
| |
| − | if (nextIndex == 6) {
| |
| − | img5.classList.remove('up-come-back');
| |
| − | text5_1.classList.remove('up-come-back');
| |
| − | down5.classList.remove('imgA-nav-gradient-back');
| |
| − |
| |
| − | img5.classList.add('up-come');
| |
| − | text5_1.classList.add('up-come');
| |
| − | down5.classList.add('imgA-nav-gradient');
| |
| − | }
| |
| − |
| |
| − | if (index == 1) {
| |
| − | gifA.classList.add('gifA-move');
| |
| − | gifA.classList.remove('gifA-move-back');
| |
| − |
| |
| − | imgA.classList.remove('imgA-nav-gradient-back');
| |
| − | imgA.classList.add('imgA-nav-gradient');
| |
| − | imgA.style.pointerEvents = "visible";
| |
| − | setTimeout(function () { imgA.style.opacity = 1 }, 800);
| |
| − |
| |
| − | left_side.classList.remove('imgA-nav-gradient-back');
| |
| − | left_side.style.pointerEvents = "visible";
| |
| − | left_side.classList.add('imgA-nav-gradient');
| |
| − | setTimeout(function () { left_side.style.opacity = 1 }, 800);
| |
| − |
| |
| − | top_img.classList.remove('imgA-nav-gradient-back');
| |
| − | top_img.style.pointerEvents = "visible";
| |
| − | top_img.classList.add('imgA-nav-gradient');
| |
| − | setTimeout(function () { top_img.style.opacity = 1 }, 800);
| |
| − | }
| |
| − | if (index == 2) {
| |
| − | img1_1.classList.remove('right-move');
| |
| − | img1_2.classList.remove('imgA-nav-gradient');
| |
| − | text1.classList.remove('imgA-nav-gradient');
| |
| − | down1.classList.remove('imgA-nav-gradient');
| |
| − |
| |
| − | img1_1.classList.add('right-move-back');
| |
| − | img1_2.classList.add('imgA-nav-gradient-back');
| |
| − | text1.classList.add('imgA-nav-gradient-back');
| |
| − | down1.classList.add('imgA-nav-gradient-back');
| |
| − | }
| |
| − |
| |
| − | if (index == 3) {
| |
| − | img2_1.classList.remove('table-rotate');
| |
| − | img2_2.classList.remove('right-up-come');
| |
| − | text2.classList.remove('left-come');
| |
| − | down2.classList.remove('imgA-nav-gradient');
| |
| − |
| |
| − | img2_1.classList.add('table-rotate-back');
| |
| − | img2_2.classList.add('right-up-come-back');
| |
| − | text2.classList.add('left-come-back');
| |
| − | down2.classList.add('imgA-nav-gradient-back');
| |
| − | }
| |
| − |
| |
| − | if (index == 4) {
| |
| − | img3.classList.remove('bear-swing');
| |
| − | text3.classList.remove('imgA-nav-gradient');
| |
| − | down3.classList.remove('imgA-nav-gradient');
| |
| − |
| |
| − | img3.classList.add('bear-swing-back');
| |
| − | text3.classList.add('imgA-nav-gradient-back');
| |
| − | down3.classList.add('imgA-nav-gradient-back');
| |
| − | }
| |
| − |
| |
| − | if (index == 5) {
| |
| − | img4.classList.remove('bear-swing');
| |
| − | text4.classList.remove('imgA-nav-gradient');
| |
| − | down4.classList.remove('imgA-nav-gradient');
| |
| − |
| |
| − | img4.classList.add('bear-swing-back');
| |
| − | text4.classList.add('imgA-nav-gradient-back');
| |
| − | down4.classList.add('imgA-nav-gradient-back');
| |
| − | }
| |
| − |
| |
| − | if (index == 6) {
| |
| − | img5.classList.remove('up-come');
| |
| − | text5_1.classList.remove('up-come');
| |
| − | down5.classList.remove('imgA-nav-gradient');
| |
| − |
| |
| − | img5.classList.add('up-come-back');
| |
| − | text5_1.classList.add('up-come-back');
| |
| − | down5.classList.add('imgA-nav-gradient-back');
| |
| − | }
| |
| − | },
| |
| − | 'afterLoad': function (anchorLink, index) { // 滚动到某一屏时加载动画样式
| |
| − | if (index == 1) {
| |
| − |
| |
| − | }
| |
| − | if (index == 2) {
| |
| − |
| |
| − | }
| |
| − | },
| |
| − | });
| |
| − | });
| |
| − | </script>
| |
| | <script> | | <script> |
| | //在页面未加载完毕之前显示的loading Html自定义内容 | | //在页面未加载完毕之前显示的loading Html自定义内容 |
