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

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

Latest revision as of 18:57, 16 October 2018

}