Difference between revisions of "Team:BIT-China"

Line 1: Line 1:
 +
<!DOCTYPE html>
 
<html>
 
<html>
  
 
<head>
 
<head>
 
     <meta charset="utf-8" />
 
     <meta charset="utf-8" />
−
<!--  ================================================================
 
−
      Welcome to check our code. If necessary, please contact InspAlgo@gmail.com.
 
−
      GitHub: https://github.com/InspAlgo
 
−
      CSDN: https://blog.csdn.net/qq_38597315
 
−
      博客园: http://www.cnblogs.com/inspalgo
 
−
===================================================================== -->
 
−
    <title>iGEM</title>
 
 
     <style>
 
     <style>
 
         body {
 
         body {
Line 16: Line 10:
 
             background-color: transparent !important;
 
             background-color: transparent !important;
 
         }
 
         }
 +
 
         #globalWrapper {
 
         #globalWrapper {
 
             margin: 0;
 
             margin: 0;
 
             padding: 0;
 
             padding: 0;
 +
            font-size: transparent !important;
 
         }
 
         }
 +
 
         #content {
 
         #content {
 
             width: 100%;
 
             width: 100%;
Line 25: Line 22:
 
             margin: -12px 0 0;
 
             margin: -12px 0 0;
 
             background-color: transparent !important;
 
             background-color: transparent !important;
 +
            color: transparent !important;
 
         }
 
         }
  
Line 31: Line 29:
 
         }
 
         }
  
 +
        p:hover {
 +
            border-style: transparent !important;
 +
        }
 
     </style>
 
     </style>
−
 
+
     <link rel="stylesheet" href="https://2018.igem.org/Template:BIT-China/css/fullPage-style?action=raw&amp;ctype=text/css">
−
     <link rel="stylesheet" href="https://2018.igem.org/Template:BIT-China/css/temp-fullPage-style?action=raw&amp;ctype=text/css">
+
     <link rel="stylesheet" href="https://2018.igem.org/Template:BIT-China/css/common-style?action=raw&amp;ctype=text/css">
−
     <link rel="stylesheet" href="https://2018.igem.org/Template:BIT-China/css/temp-common-style?action=raw&amp;ctype=text/css">
+
     <link rel="stylesheet" href="https://2018.igem.org/Template:BIT-China/css/css-animation?action=raw&amp;ctype=text/css">
−
     <link rel="stylesheet" href="https://2018.igem.org/Template:BIT-China/css/temp-css-animation?action=raw&amp;ctype=text/css">
+
−
    <link rel="stylesheet" href="https://2018.igem.org/Template:BIT-China/css/temp-nav-dot-style?action=raw&amp;ctype=text/css">
+
  
 
     <style>
 
     <style>
−
         .arr-style {
+
         .down-arrow-style {
−
            cursor: pointer;
+
 
             position: absolute;
 
             position: absolute;
−
             left: calc(50vw - 50px);
+
            z-index: 4;
 +
             left: calc(50vw - 20px);
 
             top: calc(100vh - 50px);
 
             top: calc(100vh - 50px);
−
             width: 50px;
+
             width: 40px;
−
             height: 10px;
+
             height: 40px;
−
        }
+
−
 
+
−
        .top-old-style {
+
 
             cursor: pointer;
 
             cursor: pointer;
−
            position: absolute;
 
−
            right: 20px;
 
−
            top: calc(100vh - 60px);
 
−
            width: 30px;
 
−
            height: 30px;
 
−
            opacity: 0;
 
−
            transition: all 1s;
 
−
            -webkit-transition: all 1s;
 
−
            -moz-transition: all 1s;
 
−
            -ms-transition: all 1s;
 
 
         }
 
         }
  
−
         .top-new-style {
+
         .top-style {
−
             cursor: pointer;
+
             position: fixed;
−
             position: absolute;
+
             z-index: 4;
 
             right: 20px;
 
             right: 20px;
−
             top: calc(100vh - 60px);
+
             top: calc(100vh - 40px);
 
             width: 30px;
 
             width: 30px;
 
             height: 30px;
 
             height: 30px;
−
             opacity: 1;
+
             cursor: pointer;
−
            transition: all 1s;
+
−
            -webkit-transition: all 1s;
+
−
            -moz-transition: all 1s;
+
−
            -ms-transition: all 1s;
+
 
         }
 
         }
 +
    </style>
 +
    <script src="https://2018.igem.org/Template:BIT-China/js/base-loading?action=raw&ctype=text/javascript"></script>
  
−
        .img2_1-old-pos {
+
</head>
−
            z-index: 1;
+
−
            position: absolute;
+
−
            left: calc(20vw + 350px);
+
−
            top: calc(0vh + 200px);
+
  
−
             height: 380px;
+
<body class="scoll_dis">
−
             width: 600px;
+
    <!-- 导航栏 start -->
−
            opacity: 0;
+
    <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>
  
−
         .img2_1-new-pos {
+
         <li>
−
             opacity: 0;
+
             <a>EXPERIMENT</a>
−
             -webkit-transition: all .4s;
+
             <ul>
−
            -moz-transition: all .4s;
+
                <li><a href="https://2018.igem.org/Team:BIT-China/ExperimentsRegulator">Regulator</a></li>
−
            -ms-transition: all .4s;
+
                <li><a href="https://2018.igem.org/Team:BIT-China/ExperimentsFeedback">Feedback</a></li>
−
            transition: all .4s;
+
                <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>
−
    </style>
+
            </ul>
 +
        </li>
  
−
</head>
+
        <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>
  
−
<body>
+
        <li>
−
    <div id="left-side">
+
            <a>HUMAN PRACTICES</a>
−
        <ul>
+
             <ul>
−
             <li>
+
                 <li><a href="https://2018.igem.org/Team:BIT-China/Human_Practices">Integrated Human Practices</a></li>
−
                 PROJECT
+
                 <li><a href="https://2018.igem.org/Team:BIT-China/Public_Engagement">Education & Public Engagement</a></li>
−
            </li>
+
                 <li><a href="https://2018.igem.org/Team:BIT-China/Collaborations">Collaborations</a></li>
−
            <li>
+
             </ul>
−
                EXPERIMENT
+
         </li>
−
            </li>
+
−
            <li>
+
−
                 MODELING
+
−
            </li>
+
−
            <li>
+
−
                HP
+
−
            </li>
+
−
            <li>
+
−
                 NOTEBOOK
+
−
            </li>
+
−
            <li>
+
−
                ACHIEVEMENTS
+
−
            </li>
+
−
            <li>
+
−
                TEAM
+
−
             </li>
+
−
         </ul>
+
−
    </div>
+
  
−
    <img id="imgA" src="https://static.igem.org/mediawiki/2018/4/46/T--BIT-China--iGEM2018-A_img.png" />
+
        <li>
−
     <img id="imgA2" src="https://static.igem.org/mediawiki/2018/4/46/T--BIT-China--iGEM2018-A_img.png" />
+
            <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="dowebok">
−
         <div class="section" id="home_section_1">
+
         <div id="home_section_0" class="section">
−
             <img id="img1_2" style="z-index: 2;position: absolute;left: calc(63vw - 185px);top: 40px;height: 280px;width: 520px;display: block;"
+
            <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;">
−
                 src="https://static.igem.org/mediawiki/2018/c/cd/T--BIT-China--iGEM2018-wz_img.png">
+
 
−
             <img id="img1_1" style="z-index: 1;position: absolute;left:calc(63vw - 600px);top: 135px;height: 400px;width: 600px;" src="https://static.igem.org/mediawiki/2018/1/1c/T--BIT-China--iGEM2018-img_home_2.png">
+
            <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 style="position: absolute;left:calc(63vw + 20px);top:400px;">
+
             <div id="text1" style="z-index:1;position: absolute;left:calc(50vw - 250px);bottom:calc(50vh - 250px);">
−
                 <div id="text1">
+
                 <p class="p_style" style="width:350px;">
−
                    <a class="a_style">
+
                     <font size="5" face="kg_second_chances_solidRg">“A”</font> indicates antioxidant, and can also
−
                        BIO-DETECTOR OF ANTIOXIDANTS
+
                    represent the best in the grade rating. So the core of our project is to build an antioxidant
−
                     </a>
+
                     detecting system to rank antioxidants.
−
                    <p class="p_style">
+
                 </p>
−
                        ROS plays a complicated roll in our daily life. It is a
+
−
                        <br>crucial signal in living cells and it causes senescence,
+
−
                        <br>thus it arouses great concerns of the public.
+
−
                     </p>
+
−
                 </div>
+
 
             </div>
 
             </div>
  
−
             <img onclick="arr_down()" class="arr-style" src="https://static.igem.org/mediawiki/2018/8/81/T--BIT-China--iGEM2018-arr_img.png">
+
             <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>
  
−
         <div class="section" id="home_section_2">
+
         <div id="home_section_2" class="section">
−
             <img id="img2_2" style="z-index: 2;position: absolute;left: 20vw;top: 0vh;height: 500px;width: 500px; transform:rotate(1deg);"
+
             <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">
 
                 src="https://static.igem.org/mediawiki/2018/d/da/T--BIT-China--iGEM2018-img_home_4.png">
−
             <img id="img2_1" class="img2_1-old-pos" src="https://static.igem.org/mediawiki/2018/a/a6/T--BIT-China--iGEM2018-img_home_3.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 style="position: absolute;left:calc(20vw + 40px);top:calc(0vh + 480px);">
+
             <div id="text3" style="position: absolute;left:calc(50vw + 200px);top:calc(50vh - 60px);">
−
                 <div id="text2">
+
                 <p class="p_style" style="width:360px;">
−
                     <a class="a_style">
+
                     <font size="5" face="kg_second_chances_solidRg">Oxidation</font> damage is very common in our daily
−
                        WHAT’S SPECIAL
+
                     life. It may be caused by UV in the sun, unhealthy living habits, irregular work and rest times,
−
                    </a>
+
                    and its accumulation will eventually infect the normal function of our body, lead to gene mutation,
−
                     <p class="p_style">
+
                    cell cancer and aging. Therefore, antioxidants are urgently needed to defended the damage of
−
                        There are many products that claim to have
+
                     oxidation.
−
                        <br> the function of removing ROS for anti-aging.
+
                 </p>
−
                     </p>
+
−
                 </div>
+
 
             </div>
 
             </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>
  
−
         <div class="section" id="home_section_3">
+
         <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>
  
−
         <div class="section" id="home_section_4">
+
         <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>
 
     </div>
 
     </div>
Line 178: Line 230:
 
     <img id="top-img" onclick="top_up()" src="https://static.igem.org/mediawiki/2018/3/34/T--BIT-China--iGEM2018-top_img.png">
 
     <img id="top-img" onclick="top_up()" src="https://static.igem.org/mediawiki/2018/3/34/T--BIT-China--iGEM2018-top_img.png">
  
−
    <div class="cursor">
+
     <script src="https://2018.igem.org/Template:BIT-China/js/jquery-min?action=raw&ctype=text/javascript"></script>
−
        <!-- Main -->
+
    <!-- 导航栏 -->
−
        <div class="box"></div>
+
     <script src="https://2018.igem.org/Template:BIT-China/js/copy-tendina?action=raw&ctype=text/javascript"></script>
−
        <div class="box hover"></div>
+
−
    </div>
+
−
 
+
−
     <script src="https://2018.igem.org/Template:BIT-China/js/temp-jquery-min?action=raw&amp;ctype=text/javascript"></script>
+
−
     <script src="https://2018.igem.org/Template:BIT-China/js/temp-jquery-fullPage-min?action=raw&amp;ctype=text/javascript"></script>
+
 
     <script>
 
     <script>
−
         var left_side = document.getElementById('left-side'),
+
         $('#left-nav').tendina({
−
             text1 = document.getElementById('text1'),
+
            animate: true,
−
            text2 = document.getElementById('text2'),
+
             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'),
 
             imgA = document.getElementById('imgA'),
−
             imgA2 = document.getElementById('imgA2'),
+
             gifA = document.getElementById('gifA'),
−
            img2_1 = document.getElementById('img2_1'),
+
 
             top_img = document.getElementById('top-img');
 
             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() {
 
         function arr_down() {
Line 206: Line 280:
 
         $(function () {
 
         $(function () {
 
             $('#dowebok').fullpage({
 
             $('#dowebok').fullpage({
−
                 'navigation': true,  
+
                 'scrollingSpeed': 1000,
−
                 'anchors': ['', '', '', ''],
+
                //'navigation': true, // 显示滚动圆点
−
                 'afterRender': function () {
+
                 'anchors': [], // anchors参数防止在火狐浏览器中一次滚动到底部
−
                     left_side.classList.add('nope');
+
                 'afterRender': function () { // 页面初始化完成后的回调函数
 +
                     left_side.style.opacity = 0;
 +
                    left_side.style.pointerEvents = "none";
  
−
                     imgA.className = 'imgA-old-pos';
+
                     imgA.style.opacity = 0;
−
                     imgA2.className = 'imgA-old-pos';
+
                     imgA.style.pointerEvents = "none";
−
                    imgA2.style.opacity = 0;
+
  
−
                     top_img.classList.add('top-old-style');
+
                     top_img.style.opacity = 0;
−
 
+
                    top_img.style.pointerEvents = "none";
−
                     text1.classList.add('sleepyEyes');
+
                     top_img.classList.add('top-style');
 
                 },
 
                 },
−
                 'onLeave': function (index, nextIndex, direction) {
+
                 'onLeave': function (index, nextIndex, direction) { // 滚动前的回调函数
 
                     if (nextIndex == 1) {
 
                     if (nextIndex == 1) {
−
                         left_side.classList.add('nope');
+
                         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');
  
−
                         imgA.classList.remove('imgA-move');
+
                         top_img.style.opacity = 0;
−
                         imgA.classList.remove('imgA-new-pos');
+
                         top_img.pointerEvents = "none";
−
                         imgA2.classList.remove('imgA-move2');
+
                         top_img.classList.remove('imgA-nav-gradient');
−
                         imgA2.classList.remove('imgA-new-pos');
+
                         top_img.classList.add('imgA-nav-gradient-back');
−
                        imgA.classList.add('move-imgA');
+
−
                        imgA2.classList.add('move2-imgA');
+
−
                        imgA2.style.opacity = 0;
+
  
−
                         top_img.classList.remove('top-new-style');
+
                         gifA.classList.remove('gifA-move');
−
                         top_img.classList.add('top-old-style');
+
                         gifA.classList.add('gifA-move-back');
  
−
                        text1.classList.add('sleepyEyes');
 
 
                     }
 
                     }
 
                     if (nextIndex == 2) {
 
                     if (nextIndex == 2) {
−
                         img2_1.classList.remove('img2_1-new-pos');
+
                         img1_1.classList.remove('right-move-back');
−
                         img2_1.style.opacity = 0;
+
                         img1_2.classList.remove('imgA-nav-gradient-back');
 +
                        text1.classList.remove('imgA-nav-gradient-back');
 +
                        down1.classList.remove('imgA-nav-gradient-back');
  
−
                         text2.classList.add('glaucoma');
+
                        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) {
 
                     if (index == 1) {
−
                         left_side.classList.remove('nope');
+
                         gifA.classList.add('gifA-move');
−
                         text1.classList.remove('sleepyEyes');
+
                         gifA.classList.remove('gifA-move-back');
  
−
                         imgA.classList.remove('move-imgA');
+
                         imgA.classList.remove('imgA-nav-gradient-back');
−
                        imgA2.classList.remove('move2-imgA');
+
                         imgA.classList.add('imgA-nav-gradient');
−
                         imgA.classList.add('imgA-move');
+
                         imgA.style.pointerEvents = "visible";
−
                         imgA.style.opacity = 0;
+
                         setTimeout(function () { imgA.style.opacity = 1 }, 800);
−
                         imgA.classList.add('imgA-new-pos');
+
−
                        imgA2.classList.add('imgA-move2');
+
−
                        imgA2.classList.add('imgA-new-pos');
+
−
                        imgA2.style.opacity = 1;
+
  
−
                         top_img.classList.remove('top-old-style');
+
                         left_side.classList.remove('imgA-nav-gradient-back');
−
                         top_img.classList.add('top-new-style');
+
                        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) {
 
                     if (index == 2) {
−
                         img2_1.classList.add('img2_1-new-pos');
+
                         img1_1.classList.remove('right-move');
−
                         img2_1.classList.remove('gettinLifted');
+
                        img1_2.classList.remove('imgA-nav-gradient');
 +
                         text1.classList.remove('imgA-nav-gradient');
 +
                        down1.classList.remove('imgA-nav-gradient');
  
−
                         text2.classList.remove('glaucoma');
+
                        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) {
+
                 'afterLoad': function (anchorLink, index) { // 滚动到某一屏时加载动画样式
 
                     if (index == 1) {
 
                     if (index == 1) {
−
                        imgA2.style.opacity = 0;
+
 
−
                        imgA.style.opacity = 1;
+
 
                     }
 
                     }
 
                     if (index == 2) {
 
                     if (index == 2) {
−
                        img2_1.classList.add('gettinLifted');
+
 
−
                        img2_1.style.opacity = 1;
+
 
                     }
 
                     }
 
                 },
 
                 },

Revision as of 11:14, 14 October 2018

<!DOCTYPE html>

“A” 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.

Antioxidants are
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.

Oxidation 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.

Even though antioxidant is so important, there’s no standard ways to tell us which antioxidant works better.

Our 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