Difference between revisions of "Template:NAU-CHINA"

 
(58 intermediate revisions by 3 users not shown)
Line 5: Line 5:
 
     <title>Template:2018_NAU-CHINA</title>
 
     <title>Template:2018_NAU-CHINA</title>
 
     <link rel="stylesheet" type="text/css" href="https://2018.igem.org/wiki/index.php?title=Template:NAU-CHINA/MainCSS&action=raw&ctype=text/css" />
 
     <link rel="stylesheet" type="text/css" href="https://2018.igem.org/wiki/index.php?title=Template:NAU-CHINA/MainCSS&action=raw&ctype=text/css" />
 +
    <script>
 +
        $(document).ready(function () {
 +
            var icon1 = $('#icon1');
 +
            var icon2 = $('#icon2');
 +
            var icon3 = $('#icon3');
 +
            var icon4 = $('#icon4');
 +
            setInterval(function() {
 +
                var h = $(window).scrollTop();
 +
                var H = $(document).height();
 +
                if (h < 500) {
 +
                    if (h >= 200) {
 +
                        icon1.animate({ left: '1.6vw' }, 800);
 +
                        icon1.animate({ top: '30vh' }, 500);
 +
 +
                        icon2.animate({ left: '1.6vw' }, 800);
 +
                        icon2.animate({ top: '45vh' }, 500);
 +
 +
                        icon3.animate({ left: '1.6vw' }, 800);
 +
                        icon3.animate({ top: '60vh' }, 500);
 +
 +
                        icon4.animate({ left: '1.6vw' }, 800);
 +
                        icon4.animate({ top: '75vh' }, 500);
 +
                    }
 +
                }
 +
               
 +
                if (H - h <= 1000) {
 +
                    icon1.animate({ top: '80vh' }, 500);
 +
                    icon1.animate({ left: '35vw' }, 800);
 +
 +
                    icon2.animate({ top: '80vh' }, 500);
 +
                    icon2.animate({ left: '45vw' }, 800);
 +
 +
                    icon3.animate({ top: '80vh' }, 500);
 +
                    icon3.animate({ left: '55vw' }, 800);
 +
 +
                    icon4.animate({ left: '5vw' }, 800);
 +
                    icon4.animate({ top: '65vh' }, 500);
 +
                }
 +
               
 +
            }, 10);
 +
        });
 +
 +
    </script>
 +
 +
 +
<style>
 +
        #icon1 {
 +
            top: 60vh;
 +
            left: 35vw;
 +
        }
 +
        #icon2 {
 +
            top: 60vh;
 +
            left: 45vw;
 +
        }
 +
        #icon3 {
 +
            top: 60vh;
 +
            left: 55vw;
 +
        }
 +
        #icon4 {
 +
            top: 60vh;
 +
            left: 65vw;
 +
        }
 +
        @keyframes toSide {
 +
            0% {
 +
                left: initial;
 +
                top: initial;
 +
            }
 +
 +
            100% {
 +
                left: 10vw
 +
            }
 +
        }
 +
 +
        .guide-icon {
 +
            width: 80px;
 +
            position: fixed;
 +
            z-index:999;
 +
            background-color:rgba(245,245,245,0.5);
 +
            border-radius:10%;
 +
        }
 +
 +
 +
/*==========================Global===============================*/
 +
body {
 +
    overflow-y: hidden;
 +
}
 +
 +
#mw-content-text {
 +
    margin: 60px 0 0 0;
 +
}
 +
 +
#banner img {
 +
    width:100%;
 +
}
 +
 +
.top-title {
 +
    margin:0 !important;
 +
    position: absolute !important;
 +
    font-family:sans-serif !important;
 +
    font-size: 9vw !important;
 +
    top:42vh !important;
 +
    left:9vw !important;
 +
}
 +
.sec-title {
 +
    margin:0 !important;
 +
    position: absolute !important;
 +
    font-size: 4vw !important;
 +
    color: #000000 !important;
 +
    top:72vh !important;
 +
    left:27vw !important;
 +
}
 +
 +
/*定义加载图像的格式*/
 +
#loading_icon {
 +
    position: fixed;
 +
    left: 0px;
 +
    top: 0px;
 +
    width: 100%;
 +
    height: 100%;
 +
    z-index: 99999999;
 +
    background: url("https://static.igem.org/mediawiki/2018/0/0c/T--NAU-CHINA--loading_icon.gif") no-repeat black;
 +
    background-position: left 50% top 30%;
 +
    background-size: 22vw;
 +
}
 +
 +
/*定义加载文字的格式*/
 +
#loading_icon span {
 +
    position: fixed;
 +
    top: 60vh;
 +
    left: 41vw;
 +
    font-size: 3.5vw;
 +
    font-family: 'Vladimir Script','Rage Italic','sans-serif';
 +
    color:white;
 +
    text-align:center;
 +
    /*display:none;*/
 +
}
 +
 +
/*图像指针为小手，并且可以点开*/
 +
img.zoom {
 +
    cursor: pointer;
 +
}
 +
 +
/*指针悬停时图片上浮*/
 +
.img_zoom:hover {
 +
    padding-bottom: 5px;
 +
    transition: 0.5s;
 +
    margin-top: -5px;
 +
}
 +
 +
 +
/*小图标移动放大*/
 +
.img_guide {
 +
    transform: scale(0.8);
 +
    transition: 0.5s;
 +
}
 +
 +
.img_guide:hover {
 +
    transform: scale(1);
 +
    transition: 0.5s;
 +
}
 +
 +
 +
/*=========================InPages===============================*/
 +
 +
.main-content {
 +
    margin:0 14%;
 +
    text-align:justify;
 +
}
 +
 +
figure {
 +
    margin-top:15px !important;
 +
    margin-bottom:30px !important;
 +
}
 +
 +
figure img {
 +
    display: block;
 +
    margin:15px auto 15px auto;
 +
    /*width:800px;*/
 +
}
 +
 +
figcaption {
 +
    text-align: justify;
 +
    font-family: 'Times New Roman','sans-serif';
 +
    font-size:0.9em;
 +
    line-height:1.2em;
 +
 +
}
 +
._table {
 +
    /*text-align: left;*/
 +
}
 +
.textblock {
 +
    margin-bottom:5em;
 +
}
 +
.section {
 +
    margin-bottom:2.5em;
 +
}
 +
.main-content h1 {
 +
    font-family: 'Avenir Next Condensed',sans-serif;
 +
    color: #a01111;
 +
    margin:32px 0 !important;
 +
    margin-left:40px !important;
 +
    font-size:48px;
 +
    font-weight:bold !important;
 +
    line-height:60px !important;
 +
}
 +
 +
.main-content h2 {
 +
    font-size:24px !important;
 +
    margin:19px 0 !important;
 +
    font-weight:bold !important;
 +
    line-height:30px !important;
 +
}
 +
 +
.main-content p {
 +
    font-family: 'Avenir Light','Helvetica',sans-serif !important;
 +
    font-size: 20px !important;
 +
    line-height: 1.7em;
 +
    text-align: justify !important;
 +
    margin-bottom: 2em;
 +
 +
}
 +
 +
.main-content a {
 +
    color:blue !important;
 +
}
 +
 +
.photo {
 +
    width:100%;
 +
    margin:0 auto;
 +
}
 +
.hp-photo {
 +
    width:700px;
 +
    margin:0 15%;
 +
}
 +
 +
.divvideo,video {
 +
    text-align:center;
 +
 +
}
 +
 +
</style>
 
     <script>
 
     <script>
  
Line 19: Line 260:
 
         var lp = $("#loading_icon span").width()
 
         var lp = $("#loading_icon span").width()
 
         //Loading Icon
 
         //Loading Icon
−
         $("#loading_icon").fadeOut(1); //Aply: 2000，Debug: 1
+
         $("#loading_icon").fadeOut(2000); //Aply: 2000，Debug: 1
  
 
      
 
      
Line 41: Line 282:
 
<body>
 
<body>
 
     <div id="loading_icon">
 
     <div id="loading_icon">
−
         <span>MOSFET</span>
+
         <!--<span>MOSFET</span>-->
 
     </div>
 
     </div>
 
</body>
 
</body>
 
</html>
 
</html>

Latest revision as of 01:03, 9 November 2018

Template:2018_NAU-CHINA