Difference between revisions of "Team:BIT-China"

 
(39 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
<html>
 
<html>
−
<head>
 
−
    <meta charset="utf-8" />
 
−
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
−
    <meta name="viewport" content="width=device-width, initial-scale=1">
 
−
    <title>iGEM</title>
 
−
<style>
 
  
−
 
+
<head>
−
        /*以下CSS用于解决iGEM官网坑爹样式问题*/
+
    <style>
 
         body {
 
         body {
 
             height: 100%;
 
             height: 100%;
 
             width: 100%;
 
             width: 100%;
−
            font-family: 'Helvetica', 'Arial', 'Verdana', sans-serif;
+
             background-color: transparent !important;
−
             background-color: rgba(242,215,188,0.4);
+
 
         }
 
         }
−
         #globalWrapper{
+
 
 +
         #globalWrapper {
 
             margin: 0;
 
             margin: 0;
 
             padding: 0;
 
             padding: 0;
 +
            font-size: transparent !important;
 
         }
 
         }
−
         #content{
+
 
 +
         #content {
 
             width: 100%;
 
             width: 100%;
 
             padding: 0;
 
             padding: 0;
 
             margin: -12px 0 0;
 
             margin: -12px 0 0;
−
background-color: transparent !important;
+
            background-color: transparent !important;
 +
            color: transparent !important;
 
         }
 
         }
−
         #top_title{
+
 
 +
         #top_title {
 
             display: none;
 
             display: none;
 
         }
 
         }
  
−
         /*以上CSS用于解决iGEM官网坑爹样式问题*/
+
         p:hover {
−
</style>
+
            border-style: transparent !important;
−
     <link rel="stylesheet" href="https://2018.igem.org/Template:BIT-China/css/temp-fullPage-style?action=raw&ctype=text/css" />
+
        }
−
     <link rel="stylesheet" href="https://2018.igem.org/Template:BIT-China/css/temp-common-style?action=raw&ctype=text/css" />
+
    </style>
−
     <link rel="stylesheet" href="https://2018.igem.org/Template:BIT-China/css/temp-css-animation?action=raw&ctype=text/css" />
+
     <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-mouse-template?action=raw&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-mouse-media?action=raw&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-nav-dot-style?action=raw&ctype=text/css" />
+
 
 
     <style>
 
     <style>
−
         .arr-style {
+
         .down-arrow-style {
−
            cursor: pointer;
+
 
             position: absolute;
 
             position: absolute;
−
             right: 650px;
+
             z-index: 4;
−
             top: 480px;
+
            left: calc(50vw - 20px);
−
             width: 50px;
+
             top: calc(100vh - 50px);
−
             height: 10px;
+
             width: 40px;
−
        }
+
             height: 40px;
−
 
+
−
        .top-old-style {
+
 
             cursor: pointer;
 
             cursor: pointer;
−
            position: absolute;
 
−
            right: 50px;
 
−
            top: 550px;
 
−
            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: 50px;
+
             right: 20px;
−
             top: 550px;
+
             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>
 +
</head>
  
−
        .text1-old-pos {
+
<body>
−
             position: relative;
+
            <ul id="left-nav">
−
             left: -900px;
+
        <li>
−
            top: -10px;
+
             <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>
  
−
         .text1-new-pos {
+
         <li>
−
             position: relative;
+
             <a>EXPERIMENTS</a>
−
             left: 900px;
+
             <ul>
−
            top: -10px;
+
                <li><a href="https://2018.igem.org/Team:BIT-China/ExperimentsRegulator">Regulator</a></li>
−
            -webkit-transition: all 1s;
+
                <li><a href="https://2018.igem.org/Team:BIT-China/ExperimentsFeedback">Feedback</a></li>
−
            -moz-transition: all 1s;
+
                <li><a href="https://2018.igem.org/Team:BIT-China/ExperimentsOutput">Output</a></li>
−
            -ms-transition: all 1s;
+
                <li><a href="https://2018.igem.org/Team:BIT-China/Results">Results</a></li>
−
             transition: all 1s;
+
             </ul>
−
         }
+
         </li>
  
−
         .text2-old-pos {
+
         <li>
−
             position: relative;
+
             <a>MODELING</a>
−
             left: -300px;
+
             <ul>
−
            top: -70px;
+
                <li><a href="https://2018.igem.org/Team:BIT-China/Model">Overview</a></li>
−
        }
+
                <li><a href="https://2018.igem.org/Team:BIT-China/FluorescentProbesModel">Fluorescent Probe Model </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>
  
−
        .text2-new-pos {
+
                <li><a href="https://2018.igem.org/Team:BIT-China/roGFP2-Orp1MichaelisEquationModel">roGFP2-Orp1
−
            position: relative;
+
                        Michaelis equation Model</a></li>
−
            left: 300px;
+
             </ul>
−
            top: -70px;
+
         </li>
−
            -webkit-transition: all 1s;
+
−
            -moz-transition: all 1s;
+
−
             -ms-transition: all 1s;
+
−
            transition: all 1s;
+
−
         }
+
  
−
         .img2_1-old-pos {
+
         <li>
−
             z-index: 1;
+
             <a>HUMAN PRACTICES</a>
−
             position: absolute;
+
             <ul>
−
            /* right: -140px;
+
                <li><a href="https://2018.igem.org/Team:BIT-China/HPOverview">Overview</a></li>
−
            top: -165px; */
+
                <li><a href="https://2018.igem.org/Team:BIT-China/Human_Practices">Integrated Human Practices</a></li>
−
            right: 140px;
+
                <li><a href="https://2018.igem.org/Team:BIT-China/Public_Engagement">Education & Public Engagement</a></li>
−
             top: 165px;
+
                <li><a href="https://2018.igem.org/Team:BIT-China/Collaborations">Collaborations</a></li>
 +
             </ul>
 +
        </li>
  
−
             height: 380px;
+
        <li>
−
             width: 600px;
+
             <a>NOTEBOOK</a>
−
            opacity: 0;
+
             <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>
  
−
         .img2_1-new-pos {
+
         <li>
−
             opacity: 0;
+
             <a>ACHIEVEMENTS</a>
−
             -webkit-transition: all .4s;
+
             <ul>
−
            -moz-transition: all .4s;
+
                <li><a href="https://2018.igem.org/Team:BIT-China/JudgingForm">Judging Form</a></li>
−
            -ms-transition: all .4s;
+
                <li><a href="https://2018.igem.org/Team:BIT-China/Parts">Parts</a></li>
−
            transition: all .4s;
+
                <li><a href="https://2018.igem.org/Team:BIT-China/Improve">Improve</a></li>
−
        }
+
                <li><a href="https://2018.igem.org/Team:BIT-China/Applied_Design">Applied Design</a></li>
−
    </style>
+
                <li><a href="https://2018.igem.org/Team:BIT-China/Demonstrate">Demonstrate</a></li>
 +
            </ul>
 +
        </li>
  
−
</head>
+
        <li>
−
 
+
            <a>TEAM</a>
−
<body>
+
            <ul>
−
    <div id="left-side">
+
                <li><a href="https://2018.igem.org/Team:BIT-China/Team">Members</a></li>
−
        <ul>
+
                <li><a href="https://2018.igem.org/Team:BIT-China/Attributions">Attributions</a></li>
−
            <li>
+
                <li><a href="https://2018.igem.org/Team:BIT-China/Gallery">Gallery</a></li>
−
                PROJECT
+
             </ul>
−
            </li>
+
         </li>
−
            <li>
+
     </ul>
−
                EXPERIMENT
+
−
            </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" />
+
     <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>
−
    <img id="imgA2" src="https://static.igem.org/mediawiki/2018/4/46/T--BIT-China--iGEM2018-A_img.png" />
+
 
     <!-- end -->
 
     <!-- end -->
  
 
     <div id="dowebok">
 
     <div id="dowebok">
−
         <div class="section" id="home_section_1">
+
         <div id="home_section_0" class="section">
−
             <div style="position: relative;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;">
−
                <img id="img1_1" style="z-index: 1;position: absolute;left: 280px;top: 30px;height: 400px;width: 600px;" src="https://static.igem.org/mediawiki/2018/1/1c/T--BIT-China--iGEM2018-img_home_2.png">
+
 
−
                <img id="img1_2" style="z-index: 2;position: relative;right: -680px;top: -65px;height: 280px;width: 520px;display: block;"
+
             <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;">
−
                    src="https://static.igem.org/mediawiki/2018/c/cd/T--BIT-China--iGEM2018-wz_img.png">
+
        </div>
−
                <div id="text1" class="text1-old-pos">
+
 
−
                    <a class="a_style">
+
        <div id="home_section_1" class="section">
−
                        BIO-DETECTOR OF ANTIOXIDANTS
+
            <img id="img1-1" style="z-index: 1;position: absolute;right:-5px;top: -5px;bottom:-5px;height: 100vh;width: 80vw;"
−
                    </a>
+
                src="https://static.igem.org/mediawiki/2018/2/2f/T--BIT-China--iGEM2018-home.png">
−
                     <p class="p_style">
+
            <img id="img1-2" style="z-index: 0;position: absolute;left:calc(50vw - 350px);bottom:calc(50vh - 300px);height: 260px;width: 600px;"
−
                        ROS plays a complicated roll in our daily life. It is a
+
                src="https://static.igem.org/mediawiki/2018/f/f4/T--BIT-China--iGEM2018-wordcut2.png">
−
                        <br>crucial signal in living cells and it causes senescence,
+
 
−
                        <br>thus it arouses great concerns of the public.
+
            <div id="text1" style="z-index:1;position: absolute;left:calc(50vw - 250px);bottom:calc(50vh - 230px);">
−
                     </p>
+
                <p class="p_style" style="width:350px;font-size:16px !important;">
−
                 </div>
+
                     <font size="5" face="kg_second_chances_solidRg">“A”</font> indicates antioxidant, and can also
−
                <img onclick="arr_down()" class="arr-style" src="https://static.igem.org/mediawiki/2018/8/81/T--BIT-China--iGEM2018-arr_img.png">
+
                    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>
 
             </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>
  
−
         <div class="section" id="home_section_2">
+
         <div id="home_section_2" class="section">
−
            <div style="position: relative;display: block;">
+
            <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);"
−
                <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">
+
                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: relative;right: -300px;top: -35px;height: 500px;width: 500px; transform:rotate(1deg);"
+
            <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/d/da/T--BIT-China--iGEM2018-img_home_4.png">
+
                src="https://static.igem.org/mediawiki/2018/5/56/T--BIT-China--HomePageFig1.jpg">
−
                <div id="text2" class="text2-old-pos">
+
 
−
                    <a class="a_style">
+
            <div id="text2" style="position: absolute;left:calc(50vw - 365px);top:calc(50vh + 135px);">
−
                        WHAT’S SPECIAL
+
                <p class="p_style" style="width:520px;">
−
                     </a>
+
                     <font size="5" face="kg_second_chances_solidRg">Antioxidants</font> are <br>compounds that inhibit
−
                    <p class="p_style">
+
                    oxidation.They can scavenge the excess ROS in the organisms. The antioxidants mentioned here is the
−
                        There are many products that claim to have
+
                     one working in our bodies, helping us defect the damage of oxidation.
−
                        <br> the function of removing ROS for anti-aging.
+
                 </p>
−
                     </p>
+
−
                 </div>
+
 
             </div>
 
             </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>
−
         <div class="section" id="home_section_3">
+
 
 +
         <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>
−
         <div class="section" id="home_section_4">
+
 
 +
         <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:18px !important;">
 +
                    <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>
 
  
−
    <img id="top-img" onclick="top_up()" src="https://static.igem.org/mediawiki/2018/3/34/T--BIT-China--iGEM2018-top_img.png">
+
        <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 class="cursor">
+
            <div id="text5-1" style="position: absolute;left:calc(50vw - 270px);top:calc(50vh + 120px);">
−
        <!-- Main -->
+
                <p class="p_style" style="width:640px;">
−
        <div class="box"></div>
+
                    <font size="5" face="kg_second_chances_solidRg">Our</font> goal is to build a system with function
−
        <div class="box hover"></div>
+
                    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>
  
−
     <script src="https://2018.igem.org/Template:BIT-China/js/temp-jquery-min?action=raw&ctype=text/javascript"></script>
+
     <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/temp-jquery-fullPage-min?action=raw&ctype=text/javascript"></script>
+
     <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>
 
     <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 235: Line 280:
 
         $(function () {
 
         $(function () {
 
             $('#dowebok').fullpage({
 
             $('#dowebok').fullpage({
−
                 'navigation': true,  
+
                 'scrollingSpeed': 1000,
−
                 'anchors': [],  
+
                //'navigation': true, // 显示滚动圆点
−
                 'afterRender': function () {  
+
                 'anchors': [], // anchors参数防止在火狐浏览器中一次滚动到底部
−
                     text1.className = 'text1-new-pos';
+
                 'afterRender': function () { // 页面初始化完成后的回调函数
 +
                     left_side.style.opacity = 0;
 +
                    left_side.style.pointerEvents = "none";
  
−
                     left_side.classList.add('nope');
+
                     imgA.style.opacity = 0;
 +
                    imgA.style.pointerEvents = "none";
  
−
                     imgA.className = 'imgA-old-pos';
+
                     top_img.style.opacity = 0;
−
                    imgA2.className = 'imgA-old-pos';
+
                     top_img.style.pointerEvents = "none";
−
                     imgA2.style.opacity = 0;
+
                     top_img.classList.add('top-style');
−
 
+
−
                     top_img.classList.add('top-old-style');
+
 
                 },
 
                 },
−
                 'onLeave': function (index, nextIndex, direction) {   
+
                 'onLeave': function (index, nextIndex, direction) {  // 滚动前的回调函数
 
                     if (nextIndex == 1) {
 
                     if (nextIndex == 1) {
−
                         text1.className = 'text1-old-pos';
+
                         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');
  
−
                         left_side.classList.add('nope');
+
                         top_img.style.opacity = 0;
 +
                        top_img.pointerEvents = "none";
 +
                        top_img.classList.remove('imgA-nav-gradient');
 +
                        top_img.classList.add('imgA-nav-gradient-back');
  
−
                         imgA.classList.remove('imgA-move');
+
                         gifA.classList.remove('gifA-move');
−
                         imgA.classList.remove('imgA-new-pos');
+
                         gifA.classList.add('gifA-move-back');
−
                        imgA2.classList.remove('imgA-move2');
+
−
                        imgA2.classList.remove('imgA-new-pos');
+
−
                        imgA.classList.add('move-imgA');
+
−
                        imgA2.classList.add('move2-imgA');
+
−
                        imgA2.style.opacity = 0;
+
  
−
                        top_img.classList.remove('top-new-style');
 
−
                        top_img.classList.add('top-old-style');
 
 
                     }
 
                     }
 
                     if (nextIndex == 2) {
 
                     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');
  
−
                         img2_1.classList.remove('img2_1-new-pos');
+
                        img1_1.classList.add('right-move');
−
                         img2_1.style.opacity = 0;
+
                        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');
  
−
                         text2.className = 'text2-old-pos';
+
                         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) {
−
                         imgA.classList.remove('move-imgA');
+
                         gifA.classList.add('gifA-move');
−
                         imgA2.classList.remove('move2-imgA');
+
                         gifA.classList.remove('gifA-move-back');
  
−
                         imgA.classList.add('imgA-move');
+
                        imgA.classList.remove('imgA-nav-gradient-back');
−
                         imgA.style.opacity = 0;
+
                         imgA.classList.add('imgA-nav-gradient');
−
                         imgA.classList.add('imgA-new-pos');
+
                         imgA.style.pointerEvents = "visible";
 +
                         setTimeout(function () { imgA.style.opacity = 1 }, 800);
  
−
                         imgA2.classList.add('imgA-move2');
+
                         left_side.classList.remove('imgA-nav-gradient-back');
−
                         imgA2.classList.add('imgA-new-pos');
+
                         left_side.style.pointerEvents = "visible";
−
                         imgA2.style.opacity = 1;
+
                        left_side.classList.add('imgA-nav-gradient');
−
                         top_img.classList.remove('top-old-style');
+
                         setTimeout(function () { left_side.style.opacity = 1 }, 800);
−
                         top_img.classList.add('top-new-style');
+
 
 +
                         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');
 +
 
 +
                        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');
 
                     }
 
                     }
−
                },
+
 
−
                'afterLoad': function (anchorLink, index) {
+
                     if (index == 3) {
−
                     if (index != 1) {
+
                         img2_1.classList.remove('table-rotate');
−
                         left_side.classList.remove('nope');
+
                        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 == 1) {
−
                        imgA2.style.opacity = 0;
 
−
                        imgA.style.opacity = 1;
 
  
−
                        text1.className = 'text1-new-pos';
 
 
                     }
 
                     }
 
                     if (index == 2) {
 
                     if (index == 2) {
−
                        img2_1.classList.add('gettinLifted');
 
−
                        img2_1.style.opacity = 1;
 
  
−
                        text2.className = 'text2-new-pos';
 
 
                     }
 
                     }
 
                 },
 
                 },

Latest revision as of 01:27, 18 October 2018

“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