Difference between revisions of "Team:BIT-China"

 
(32 intermediate revisions by 2 users not shown)
Line 2: Line 2:
  
 
<head>
 
<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>
 
     <style>
 
         body {
 
         body {
Line 13: Line 8:
 
             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 22: Line 20:
 
             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;
 +
        }
 +
 +
        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-mouse-template?action=raw&amp;ctype=text/css" />
+
−
    <link rel="stylesheet" href="https://2018.igem.org/Template:BIT-China/css/temp-mouse-media?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>
 +
</head>
  
−
        .img2_1-old-pos {
+
<body>
−
             z-index: 1;
+
             <ul id="left-nav">
−
             position: absolute;
+
        <li>
−
             left: calc(20vw + 350px);
+
             <a>PROJECT</a>
−
            top: calc(0vh + 200px);
+
             <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>
  
−
             height: 380px;
+
        <li>
−
             width: 600px;
+
             <a>EXPERIMENTS</a>
−
            opacity: 0;
+
             <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/Results">Results</a></li>
 +
            </ul>
 +
         </li>
  
−
         .img2_1-new-pos {
+
         <li>
−
             opacity: 0;
+
             <a>MODELING</a>
−
             -webkit-transition: all .4s;
+
             <ul>
−
            -moz-transition: all .4s;
+
                <li><a href="https://2018.igem.org/Team:BIT-China/Model">Overview</a></li>
−
            -ms-transition: all .4s;
+
                <li><a href="https://2018.igem.org/Team:BIT-China/FluorescentProbesModel">Fluorescent Probe Model </a></li>
−
            transition: all .4s;
+
                <li><a href="https://2018.igem.org/Team:BIT-China/H2O2DecompositionModel">H<sub>2</sub>O<sub>2</sub>
−
        }
+
                        Decomposition Model</a></li>
−
    </style>
+
  
−
</head>
+
                <li><a href="https://2018.igem.org/Team:BIT-China/roGFP2-Orp1MichaelisEquationModel">roGFP2-Orp1
 +
                        Michaelis equation 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/HPOverview">Overview</a></li>
−
                 PROJECT
+
                 <li><a href="https://2018.igem.org/Team:BIT-China/Human_Practices">Integrated Human Practices</a></li>
−
            </li>
+
                 <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>
−
                EXPERIMENT
+
            </ul>
−
            </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/Parts">Parts</a></li>
 +
                <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>
 +
                <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 - 230px);">
−
                 <div id="text1">
+
                 <p class="p_style" style="width:350px;font-size:16px !important;">
−
                    <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/5/56/T--BIT-China--HomePageFig1.jpg">
  
 +
            <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>
  
−
             <div style="position: absolute;left:calc(20vw + 40px);top:calc(0vh + 480px);">
+
             <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 id="text2">
+
        </div>
−
                    <a class="a_style">
+
 
−
                        WHAT’S SPECIAL
+
        <div id="home_section_3" class="section">
−
                    </a>
+
            <img id="img3" style="z-index: 2;position:absolute;left:calc(50vw - 320px);top:calc(50vh - 280px);height: 500px;width: 500px;"
−
                     <p class="p_style">
+
                 src="https://static.igem.org/mediawiki/2018/6/6c/T--BIT-China--iGEM2018-home-3.png">
−
                        There are many products that claim to have
+
 
−
                        <br> the function of removing ROS for anti-aging.
+
            <div id="text3" style="position: absolute;left:calc(50vw + 200px);top:calc(50vh - 60px);">
−
                     </p>
+
                <p class="p_style" style="width:360px;">
−
                 </div>
+
                     <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>
 
             </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: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 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 176: 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 204: 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;
+
 
                     }
 
                     }
 
                 },
 
                 },

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