Difference between revisions of "Team:BIT-China/temp-test"

 
(3 intermediate revisions by the same user not shown)
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自定义内容

Latest revision as of 18:57, 16 October 2018

}