Difference between revisions of "Team:BIT-China/Attributions"

Line 34: Line 34:
 
     <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/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/css-animation?action=raw&amp;ctype=text/css">
−
 
 
     <style>
 
     <style>
−
         .down-arrow-style {
+
         .ATT-img-1 {
 
             position: absolute;
 
             position: absolute;
−
            z-index: 4;
+
             top: calc(50vh - 30*0.62vw);
−
            left: calc(50vw - 20px);
+
             left: 25vw;
−
             top: calc(100vh - 50px);
+
             height: 60*0.618vw;
−
             width: 40px;
+
             width: 60vw;
−
             height: 40px;
+
−
             cursor: pointer;
+
 
         }
 
         }
  
−
         .top-style {
+
         .ATT-img-2 {
−
             position: fixed;
+
            position: absolute;
−
             z-index: 4;
+
            top: calc(50vh - 30*0.62vw);
−
             right: 20px;
+
            left: 125vw;
−
             top: calc(100vh - 40px);
+
            height: 60*0.618vw;
−
             width: 30px;
+
            width: 60vw;
−
             height: 30px;
+
        }
−
             cursor: pointer;
+
 
 +
        .ATT-img-3 {
 +
             position: absolute;
 +
             top: calc(50vh - 30*0.62vw);
 +
            left: 225vw;
 +
            height: 60*0.618vw;
 +
            width: 60vw;
 +
        }
 +
 
 +
        .ATT-img-4 {
 +
            position: absolute;
 +
             top: calc(50vh - 30*0.62vw);
 +
            left: 325vw;
 +
            height: 60*0.618vw;
 +
            width: 60vw;
 +
        }
 +
 
 +
        .ATT-img-5 {
 +
            position: absolute;
 +
             top: calc(50vh - 30*0.62vw);
 +
            left: 425vw;
 +
            height: 60*0.618vw;
 +
             width: 60vw;
 +
        }
 +
 
 +
        .ATT-img-6 {
 +
            position: absolute;
 +
            top: calc(50vh - 30*0.62vw);
 +
            left: 525vw;
 +
             height: 60*0.618vw;
 +
             width: 60vw;
 
         }
 
         }
 
     </style>
 
     </style>
−
    <script src="https://2018.igem.org/Template:BIT-China/js/base-loading?action=raw&ctype=text/javascript"></script>
 
  
 
</head>
 
</head>
  
 
<body class="scoll_dis">
 
<body class="scoll_dis">
 +
    <div id="world" style="z-index: 0;position: fixed;right:-500px;top: calc(100vh - 400px);"></div>
 
     <!-- 导航栏 start -->
 
     <!-- 导航栏 start -->
 
     <ul id="left-nav">
 
     <ul id="left-nav">
Line 73: Line 100:
  
 
         <li>
 
         <li>
−
             <a>EXPERIMENTS</a>
+
             <a>EXPERIMENT</a>
 
             <ul>
 
             <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/ExperimentsRegulator">Regulator</a></li>
Line 94: Line 121:
  
 
         <li>
 
         <li>
−
             <a>HUMAN PRACTICES</a>
+
             <a>HP</a>
 
             <ul>
 
             <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/Human_Practices">Integrated Human Practices</a></li>
Line 135: Line 162:
 
     <!-- end -->
 
     <!-- end -->
  
−
     <div id="dowebok">
+
     <div id="team-content">
−
         <div id="home_section_0" class="section">
+
         <div id="team-1" 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 class="ATT-img-1" src="https://static.igem.org/mediawiki/2018/6/65/T--BIT-China--iGEM2018-attribution-lichun.png">
 +
        </div>
  
−
             <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 id="team-2" class="section">
 +
             <div id="team-2-1" class="slide">
 +
                <img class="ATT-img-1" src="https://static.igem.org/mediawiki/2018/6/66/T--BIT-China--iGEM2018-attribution-wangying.png">
 +
            </div>
 +
 
 +
            <div id="team-2-2" class="slide">
 +
                <img class="ATT-img-2" src="https://static.igem.org/mediawiki/2018/1/10/T--BIT-China--iGEM2018-attribution-fengxudong.png">
 +
            </div>
 +
 
 +
            <div id="team-2-3" class="slide">
 +
                <img class="ATT-img-3" src="https://static.igem.org/mediawiki/2018/e/e3/T--BIT-China--iGEM2018-attribution-chenguoliang.png">
 +
            </div>
 +
 
 +
            <div id="team-2-4" class="slide">
 +
                <img class="ATT-img-4" src="https://static.igem.org/mediawiki/2018/c/c9/T--BIT-China--iGEM2018-attribution-liuyueqing.png">
 +
            </div>
 
         </div>
 
         </div>
  
−
         <div id="home_section_1" class="section">
+
         <div id="team-3" class="section">
−
             <img id="img1-1" style="z-index: 1;position: absolute;right:-5px;top: -5px;bottom:-5px;height: 100vh;width: 80vw;"
+
             <div id="team-3-1" class="slide">
−
                src="https://static.igem.org/mediawiki/2018/2/2f/T--BIT-China--iGEM2018-home.png">
+
                <img class="ATT-img-1" src="
−
            <img id="img1-2" style="z-index: 0;position: absolute;left:calc(50vw - 350px);bottom:calc(50vh - 300px);height: 260px;width: 600px;"
+
                    https://static.igem.org/mediawiki/2018/c/c3/T--BIT-China--iGEM2018-attribution-yujie.png">
−
                src="https://static.igem.org/mediawiki/2018/f/f4/T--BIT-China--iGEM2018-wordcut2.png">
+
            </div>
  
−
             <div id="text1" style="z-index:1;position: absolute;left:calc(50vw - 250px);bottom:calc(50vh - 250px);">
+
             <div id="team-3-2" class="slide">
−
                 <p class="p_style" style="width:350px;">
+
                 <img class="ATT-img-2" src="https://static.igem.org/mediawiki/2018/3/34/T--BIT-China--iGEM2018-attribution-linuonan.png">
−
                    <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>
 
             </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 id="team-3-3" class="slide">
 +
                <img class="ATT-img-3" src="https://static.igem.org/mediawiki/2018/6/62/T--BIT-China--iGEM2018-attribution-gaobo.png">
 +
            </div>
 +
 
 +
            <div id="team-3-4" class="slide">
 +
                <img class="ATT-img-4" src="https://static.igem.org/mediawiki/2018/5/52/T--BIT-China--iGEM2018-attribution-songqinghui.png">
 +
            </div>
 +
 
 +
            <div id="team-3-5" class="slide">
 +
                <img class="ATT-img-5" src="https://static.igem.org/mediawiki/2018/a/af/T--BIT-China--iGEM2018-attribution-caomingming.png">
 +
            </div>
 +
 
 +
            <div id="team-3-6" class="slide">
 +
                <img class="ATT-img-6" src="https://static.igem.org/mediawiki/2018/1/1a/T--BIT-China--iGEM2018-attribution-hupengjing.png">
 +
            </div>
 
         </div>
 
         </div>
  
−
         <div id="home_section_2" class="section">
+
         <div id="team-4" 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);"
+
             <div id="team-4-1" class="slide">
−
                 src="https://static.igem.org/mediawiki/2018/d/da/T--BIT-China--iGEM2018-img_home_4.png">
+
                 <img class="ATT-img-1" src="https://static.igem.org/mediawiki/2018/1/13/T--BIT-China--iGEM2018-attribution-shitao.png">
−
            <img id="img2-2" style="z-index: 1;position: absolute;left: calc(50vw - 120px);top: calc(50vh - 225px);height: 400px;width: 600px;"
+
            </div>
−
                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);">
+
             <div id="team-4-2" class="slide">
−
                 <p class="p_style" style="width:520px;">
+
                 <img class="ATT-img-2" src="https://static.igem.org/mediawiki/2018/4/44/T--BIT-China--iGEM2018-attribution-mengxiangyu.png">
−
                    <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>
  
−
             <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="team-4-3" class="slide">
 +
                <img class="ATT-img-3" src="https://static.igem.org/mediawiki/2018/0/02/T--BIT-China--iGEM2018-attribution-narengaowa.png">
 +
            </div>
 +
 
 +
            <div id="team-4-4" class="slide">
 +
                <img class="ATT-img-4" src="https://static.igem.org/mediawiki/2018/0/08/T--BIT-China--iGEM2018-attribution-luoxiaofan.png">
 +
            </div>
 +
 
 +
            <div id="team-4-5" class="slide">
 +
                <img class="ATT-img-5" src="https://static.igem.org/mediawiki/2018/7/71/T--BIT-China--iGEM2018-attribution-maomingchuan.png">
 +
            </div>
 
         </div>
 
         </div>
  
−
         <div id="home_section_3" class="section">
+
         <div id="team-5" class="section">
−
             <img id="img3" style="z-index: 2;position:absolute;left:calc(50vw - 320px);top:calc(50vh - 280px);height: 500px;width: 500px;"
+
             <div id="team-5-1" class="slide">
−
                 src="https://static.igem.org/mediawiki/2018/6/6c/T--BIT-China--iGEM2018-home-3.png">
+
                 <img class="ATT-img-1" src="https://static.igem.org/mediawiki/2018/f/f3/T--BIT-China--iGEM2018-attribution-liweiyu.png">
 +
            </div>
  
−
             <div id="text3" style="position: absolute;left:calc(50vw + 200px);top:calc(50vh - 60px);">
+
             <div id="team-5-2" class="slide">
−
                 <p class="p_style" style="width:360px;">
+
                 <img class="ATT-img-2" src="https://static.igem.org/mediawiki/2018/9/99/T--BIT-China--iGEM2018-attribution-heyuna.png">
−
                    <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 id="team-5-3" class="slide">
 +
                <img class="ATT-img-3" src="https://static.igem.org/mediawiki/2018/4/4e/T--BIT-China--iGEM2018-attribution-yuanhonglin.png">
 +
            </div>
 +
 
 +
            <div id="team-5-4" class="slide">
 +
                <img class="ATT-img-4" src="https://static.igem.org/mediawiki/2018/5/56/T--BIT-China--iGEM2018-attribution-yufanchen.png
 +
                    ">
 +
            </div>
 
         </div>
 
         </div>
  
−
         <div id="home_section_4" class="section">
+
         <div id="team-6" class="section">
−
             <img id="img4" style="z-index: 2;position: absolute;right: calc(50vw - 480px);top: calc(50vh - 280px);height: 500px;width: 500px;"
+
             <div id="team-6-1" class="slide">
−
                 src="https://static.igem.org/mediawiki/2018/1/1e/T--BIT-China--iGEM2018-home-4.png">
+
                 <img class="ATT-img-1" src="https://static.igem.org/mediawiki/2018/f/f1/T--BIT-China--iGEM2018-attribution-huangboyang.png">
 +
            </div>
  
−
             <div id="text4" style="position: absolute;right:calc(50vw - 40px);top:calc(50vh - 30px);">
+
             <div id="team-6-2" class="slide">
−
                 <p class="p_style" style="width:300px;">
+
                 <img class="ATT-img-2" src="
−
                     <font size="5" face="kg_second_chances_solidRg">Even</font> though antioxidant is so important,
+
                     https://static.igem.org/mediawiki/2018/1/1b/T--BIT-China--iGEM2018-attribution-xurunbang.png">
−
                    there’s no standard ways to tell us which antioxidant works better.
+
−
                </p>
+
 
             </div>
 
             </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 id="team-6-3" class="slide">
 +
                <img class="ATT-img-3" src="https://static.igem.org/mediawiki/2018/1/1f/T--BIT-China--iGEM2018-attribution-chaizenghao.png">
 +
            </div>
 
         </div>
 
         </div>
  
−
         <div id="home_section_5" class="section">
+
         <div id="team-7" class="section">
−
             <img id="img5" style="z-index: 2;position: absolute;left: 32vw;top: calc(50vh - 290px);height: 400px;width: 600px;"
+
             <div id="team-7-1" class="slide">
−
                 src="https://static.igem.org/mediawiki/2018/5/55/T--BIT-China--iGEM2018-home-5.png">
+
                 <img class="ATT-img-1" src="https://static.igem.org/mediawiki/2018/d/d8/T--BIT-China--iGEM2018-attribution-hanweitang.png">
 +
            </div>
  
−
             <div id="text5-1" style="position: absolute;left:calc(50vw - 270px);top:calc(50vh + 120px);">
+
             <div id="team-7-2" class="slide">
−
                 <p class="p_style" style="width:640px;">
+
                 <img class="ATT-img-2" src="https://static.igem.org/mediawiki/2018/a/a2/T--BIT-China--iGEM2018-attribution-hefa.png">
−
                    <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>
 
             </div>
  
−
             <img id="down5" class="down-arrow-style" src="https://static.igem.org/mediawiki/2018/1/19/T--BIT-China--iGEM2018-horizon.svg"
+
             <div id="team-7-3" class="slide">
−
                 style="pointer-events:none;">
+
                <img class="ATT-img-3" src="https://static.igem.org/mediawiki/2018/3/35/T--BIT-China--iGEM2018-attribution-puzhuanzhuan.png">
 +
            </div>
 +
 
 +
            <div id="team-7-4" class="slide">
 +
                <img class="ATT-img-4" src="https://static.igem.org/mediawiki/2018/6/69/T--BIT-China--iGEM2018-attribution-yeqiaofen.png">
 +
            </div>
 +
 
 +
            <div id="team-7-5" class="slide">
 +
                 <img class="ATT-img-5" src="https://static.igem.org/mediawiki/2018/4/42/T--BIT-China--iGEM2018-attribution-lijun.png">
 +
            </div>
 
         </div>
 
         </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">
 
  
 
     <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/jquery-min?action=raw&ctype=text/javascript"></script>
Line 240: Line 303:
 
     <script src="https://2018.igem.org/Template:BIT-China/js/jquery-fullPage-min?action=raw&ctype=text/javascript"></script>
 
     <script src="https://2018.igem.org/Template:BIT-China/js/jquery-fullPage-min?action=raw&ctype=text/javascript"></script>
 
     <script>
 
     <script>
−
         var left_side = document.getElementById('left-nav'),
+
         var left_nav = 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'),
+
         // setInterval(function () { // 控制slide部分的自动播放时间
−
            img1_2 = document.getElementById('img1-2'),
+
        //    $.fn.fullpage.moveSlideRight();
−
            text1 = document.getElementById('text1'),
+
         // }, 2000)
−
            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>
 
     <script>
 
     <script>
−
         $(function () {
+
         $(document).ready(function () {
−
             $('#dowebok').fullpage({
+
             $('#team-content').fullpage({
−
                 'scrollingSpeed': 1000,
+
                 'navigation': true,  // 显示滚动圆点
−
                //'navigation': true,  // 显示滚动圆点
+
 
                 'anchors': [],  // anchors参数防止在火狐浏览器中一次滚动到底部
 
                 'anchors': [],  // anchors参数防止在火狐浏览器中一次滚动到底部
−
                 'afterRender': function () { // 页面初始化完成后的回调函数
+
                 'afterRender': function () {   // 页面初始化完成后的回调函数
−
                     left_side.style.opacity = 0;
+
                     left_nav.classList.add('nope');
−
                    left_side.style.pointerEvents = "none";
+
−
 
+
−
                    imgA.style.opacity = 0;
+
−
                    imgA.style.pointerEvents = "none";
+
−
 
+
−
                    top_img.style.opacity = 0;
+
−
                    top_img.style.pointerEvents = "none";
+
−
                    top_img.classList.add('top-style');
+
 
                 },
 
                 },
−
                 'onLeave': function (index, nextIndex, direction) { // 滚动前的回调函数
+
                 'onLeave': function (index, nextIndex, direction) {   // 滚动前的回调函数
 
                     if (nextIndex == 1) {
 
                     if (nextIndex == 1) {
−
                         left_side.style.opacity = 0;
+
                         left_nav.classList.add('nope');
−
                        left_side.style.pointerEvents = "none";
+
−
                        left_side.classList.remove('imgA-nav-gradient');
+
−
                        left_side.classList.add('imgA-nav-gradient-back');
+
−
 
+
−
                        imgA.style.opacity = 0;
+
−
                        imgA.style.pointerEvents = "none";
+
−
                        imgA.classList.remove('imgA-nav-gradient');
+
−
                        imgA.classList.add('imgA-nav-gradient-back');
+
−
 
+
−
                        top_img.style.opacity = 0;
+
−
                        top_img.pointerEvents = "none";
+
−
                        top_img.classList.remove('imgA-nav-gradient');
+
−
                        top_img.classList.add('imgA-nav-gradient-back');
+
−
 
+
−
                        gifA.classList.remove('gifA-move');
+
−
                        gifA.classList.add('gifA-move-back');
+
  
−
                    }
 
−
                    if (nextIndex == 2) {
 
−
                        img1_1.classList.remove('right-move-back');
 
−
                        img1_2.classList.remove('imgA-nav-gradient-back');
 
−
                        text1.classList.remove('imgA-nav-gradient-back');
 
−
                        down1.classList.remove('imgA-nav-gradient-back');
 
−
 
−
                        img1_1.classList.add('right-move');
 
−
                        img1_2.classList.add('imgA-nav-gradient');
 
−
                        text1.classList.add('imgA-nav-gradient');
 
−
                        down1.classList.add('imgA-nav-gradient');
 
−
                    }
 
−
 
−
                    if (nextIndex == 3) {
 
−
                        img2_1.classList.remove('table-rotate-back');
 
−
                        img2_2.classList.remove('right-up-come-back');
 
−
                        text2.classList.remove('left-come-back');
 
−
                        down2.classList.remove('imgA-nav-gradient-back');
 
−
 
−
                        img2_1.classList.add('table-rotate');
 
−
                        img2_2.classList.add('right-up-come');
 
−
                        text2.classList.add('left-come');
 
−
                        down2.classList.add('imgA-nav-gradient');
 
−
                    }
 
−
 
−
                    if (nextIndex == 4) {
 
−
                        img3.classList.remove('bear-swing-back');
 
−
                        text3.classList.remove('imgA-nav-gradient-back');
 
−
                        down3.classList.remove('imgA-nav-gradient-back');
 
−
 
−
                        img3.classList.add('bear-swing');
 
−
                        text3.classList.add('imgA-nav-gradient');
 
−
                        down3.classList.add('imgA-nav-gradient');
 
−
                    }
 
−
 
−
                    if (nextIndex == 5) {
 
−
                        img4.classList.remove('bear-swing-back');
 
−
                        text4.classList.remove('imgA-nav-gradient-back');
 
−
                        down4.classList.remove('imgA-nav-gradient-back');
 
−
 
−
                        img4.classList.add('bear-swing');
 
−
                        text4.classList.add('imgA-nav-gradient');
 
−
                        down4.classList.add('imgA-nav-gradient');
 
−
                    }
 
−
 
−
                    if (nextIndex == 6) {
 
−
                        img5.classList.remove('up-come-back');
 
−
                        text5_1.classList.remove('up-come-back');
 
−
                        down5.classList.remove('imgA-nav-gradient-back');
 
−
 
−
                        img5.classList.add('up-come');
 
−
                        text5_1.classList.add('up-come');
 
−
                        down5.classList.add('imgA-nav-gradient');
 
 
                     }
 
                     }
  
 
                     if (index == 1) {
 
                     if (index == 1) {
−
                         gifA.classList.add('gifA-move');
+
                         left_nav.classList.remove('nope');
−
                        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) {  // 滚动到某一屏时加载动画样式
 
                 'afterLoad': function (anchorLink, index) {  // 滚动到某一屏时加载动画样式
−
                     if (index == 1) {
+
                },
 +
                'slidesNavigation': true,
 +
                'controlArrows': false,
 +
                'scrollingSpeed': 700,
 +
                'onSlideLeave': function (anchorLink, index, slideIndex, direction, nextSlideIndex) {  //  滚动前 slideIdex&nextSlideIndex从0开始
 +
                     if (index == 2 && nextSlideIndex == 1) {
  
 
                     }
 
                     }
−
                     if (index == 2) {
+
                },
 +
                'afterSlideLoad': function (anchorLink, index, slideAnchor, slideIndex) {  // 滚动后 slideIndex从1开始
 +
                     if (index == 2) { // section 2 部分
  
 
                     }
 
                     }
−
                 },
+
                 }
 
             });
 
             });
 
         });
 
         });
 
     </script>
 
     </script>
 +
    <script src='https://2018.igem.org/Template:BIT-China/js/three-min?action=raw&ctype=text/javascript'></script>
 +
    <script src="https://2018.igem.org/Template:BIT-China/js/index?action=raw&ctype=text/javascript"></script>
 
</body>
 
</body>
  
 
</html>
 
</html>

Revision as of 11:49, 14 October 2018