Difference between revisions of "Template:NAU-CHINA"

 
(75 intermediate revisions by 3 users not shown)
Line 4: Line 4:
 
     <meta charset="utf-8">
 
     <meta charset="utf-8">
 
     <title>Template:2018_NAU-CHINA</title>
 
     <title>Template:2018_NAU-CHINA</title>
−
     <style type="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" />
−
         body {
+
    <script>
−
             overflow-y: hidden;
+
         $(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);
  
−
        #mw-content-text {
+
                        icon2.animate({ left: '1.6vw' }, 800);
−
            margin: 60px 0 0 0;
+
                        icon2.animate({ top: '45vh' }, 500);
−
        }
+
  
−
        /*定义加载图像的格式*/
+
                        icon3.animate({ left: '1.6vw' }, 800);
−
        #loading_icon {
+
                        icon3.animate({ top: '60vh' }, 500);
−
            position: fixed;
+
 
−
            left: 0px;
+
                        icon4.animate({ left: '1.6vw' }, 800);
−
            top: 0px;
+
                        icon4.animate({ top: '75vh' }, 500);
−
            width: 100%;
+
                    }
−
            height: 100%;
+
                }
−
            z-index: 9999;
+
               
−
            background: url("https://static.igem.org/mediawiki/2018/0/0c/T--NAU-CHINA--loading_icon.gif") no-repeat black;
+
                if (H - h <= 1000) {
−
             background-position: left 50% top 30%;
+
                    icon1.animate({ top: '80vh' }, 500);
−
             background-size: 22vw;
+
                    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 {
−
         #loading_icon span {
+
−
            position: fixed;
+
 
             top: 60vh;
 
             top: 60vh;
−
             left: 38.2vw;
+
             left: 45vw;
−
            font-size: 3.5vw;
+
−
            font-family: 'Vladimir Script','Rage Italic','sans-serif';
+
−
            color:white;
+
−
            text-align:center;
+
−
/*display:none;*/
+
 
         }
 
         }
−
 
+
         #icon3 {
−
 
+
            top: 60vh;
−
         /*图像指针为小手，并且可以点开*/
+
             left: 55vw;
−
        img.zoom {
+
−
             cursor: pointer;
+
 
         }
 
         }
−
 
+
         #icon4 {
−
         /*指针悬停时图片上浮*/
+
             top: 60vh;
−
        .img_zoom:hover {
+
             left: 65vw;
−
             padding-bottom: 5px;
+
−
             transition: 0.5s;
+
−
            margin-top: -5px;
+
 
         }
 
         }
 +
        @keyframes toSide {
 +
            0% {
 +
                left: initial;
 +
                top: initial;
 +
            }
  
−
        /*小图标左侧浮动*/
+
            100% {
−
        .img_guide {
+
                left: 10vw
−
            float: left;
+
             }
−
             margin: 0 20px 0 0;
+
 
         }
 
         }
  
−
        /*小图标移动放大*/
+
         .guide-icon {
−
         .img_guide {
+
             width: 80px;
−
             transform: scale(0.8);
+
            position: fixed;
−
             transition: 0.5s;
+
            z-index:999;
 +
            background-color:rgba(245,245,245,0.5);
 +
             border-radius:10%;
 
         }
 
         }
  
−
        .img_guide:hover {
 
−
            transform: scale(1);
 
−
            transition: 0.5s;
 
−
        }
 
−
 
  
−
     </style>
+
/*==========================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>
  
−
     //更改地址栏图标
+
     //Change default shortcut icon
 
     $( document ).ready( function() {
 
     $( document ).ready( function() {
 
       $('link[rel="shortcut icon"]').attr('href','https://static.igem.org/mediawiki/2018/2/26/T--NAU-CHINA--favicon.png');
 
       $('link[rel="shortcut icon"]').attr('href','https://static.igem.org/mediawiki/2018/2/26/T--NAU-CHINA--favicon.png');
Line 80: Line 255:
 
     });
 
     });
  
−
     //加载页面
+
     //Page Loading...
 
     $(document).ready(function() {
 
     $(document).ready(function() {
−
var L = $(window).width();
+
        var L = $(window).width();
−
var lp = $("#loading_icon span").width()
+
        var lp = $("#loading_icon span").width()
−
         //加载图像
+
         //Loading Icon
−
         $("#loading_icon").fadeOut(20000); //应用2000，调试1
+
         $("#loading_icon").fadeOut(2000); //Aply: 2000，Debug: 1
  
 
      
 
      
−
         //加载文字       
+
         //Loading Text     
−
         $("#loading_icon span").css('left', (L -16 - lp)*100 / ((2 * （L-16）)) + 'vw');
+
         //$("#loading_icon span").css('left', (L +16 - lp)*100 / ((2 * （L+16）)) + 'vw');
  
  
 
     });
 
     });
  
−
     //禁止网页缩放
+
     //Ban the resize of pages
 
/*
 
/*
 
     $(document).ready(function(){
 
     $(document).ready(function(){
Line 107: 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