Difference between revisions of "Template:NAU-CHINA"

 
(129 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>
−
     <script src="https://code.jquery.com/jquery-3.3.1.js"
+
     <link rel="stylesheet" type="text/css" href="https://2018.igem.org/wiki/index.php?title=Template:NAU-CHINA/MainCSS&action=raw&ctype=text/css" />
−
            integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
+
    <script>
−
             crossorigin="anonymous">
+
        $(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>
 
     </script>
−
    <style type="text/css">
+
 
−
         body {
+
 
−
             overflow-y: hidden;
+
<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;
 +
            }
  
−
        #mw-content-text {
+
            100% {
−
            margin: 120px 0 0 0;
+
                left: 10vw
 +
            }
 
         }
 
         }
  
−
         /*定义加载图像的格式*/
+
         .guide-icon {
−
        #loading_icon {
+
            width: 80px;
 
             position: fixed;
 
             position: fixed;
−
            left: 0px;
+
             z-index:999;
−
            top: 0px;
+
             background-color:rgba(245,245,245,0.5);
−
            width: 100%;
+
             border-radius:10%;
−
            height: 100%;
+
−
             z-index: 9999;
+
−
             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: 300px;
+
−
        }
+
−
        /*定义加载文字的格式*/
+
−
        #loading_icon p {
+
−
            position: fixed;
+
−
            top: 60%;
+
−
            left: 584px;
+
−
            font-size: 3em;
+
−
            font-family: 'Vladimir Script','Rage Italic','sans-serif';
+
−
            color:white;
+
−
            text-align:center;
+
 
         }
 
         }
  
  
−
        /*图像指针为小手，并且可以点开*/
+
/*==========================Global===============================*/
−
        img.zoom {
+
body {
−
            cursor: pointer;
+
    overflow-y: hidden;
−
        }
+
}
  
−
        /*指针悬停时图片上浮*/
+
#mw-content-text {
−
        .img_zoom:hover {
+
    margin: 60px 0 0 0;
−
            padding-bottom: 5px;
+
}
−
            transition: 0.5s;
+
−
            margin-top: -5px;
+
−
        }
+
  
−
        /*小图标左侧浮动*/
+
#banner img {
−
        .img_guide {
+
    width:100%;
−
            float: left;
+
}
−
            margin: 0 20px 0 0;
+
−
        }
+
  
−
        /*小图标移动放大*/
+
.top-title {
−
        .img_guide {
+
    margin:0 !important;
−
            transform: scale(0.8);
+
    position: absolute !important;
−
            transition: 0.5s;
+
    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;
 +
}
  
−
        .img_guide:hover {
+
/*定义加载图像的格式*/
−
            transform: scale(1);
+
#loading_icon {
−
            transition: 0.5s;
+
    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%;
 +
}
  
−
     </style>
+
.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');
 +
      //$('link[rel="shortcut icon"]').attr('href','https://static.igem.org/mediawiki/2018/4/4d/T--NAU-CHINA--MOSFET_LOGO.png');
 +
 
     });
 
     });
  
−
     //加载页面
+
     //Page Loading...
 
     $(document).ready(function() {
 
     $(document).ready(function() {
−
         //加载图像
+
         var L = $(window).width();
−
        $("#loading_icon").fadeOut(2000); //应用2000，调试1
+
         var lp = $("#loading_icon span").width()
−
        //加载文字
+
         //Loading Icon
−
         var l = $(window).width();
+
        $("#loading_icon").fadeOut(2000); //Aply: 2000，Debug: 1
−
         var l2 = $("#loading_icon p").width()
+
 
−
         $("#loading_icon p").css("left", (l - l2) / 2 - 10 + "px");
+
   
 +
         //Loading Text     
 +
        //$("#loading_icon span").css('left', (L +16 - lp)*100 / ((2 * （L+16）)) + 'vw');
  
  
 
     });
 
     });
  
−
     //禁止网页缩放
+
     //Ban the resize of pages
 +
/*
 
     $(document).ready(function(){
 
     $(document).ready(function(){
−
       $("body").css("min-width",screen.availWidth-300);
+
       $("body").css("min-width",1200);
 
     });
 
     });
−
 
+
*/
  
  
Line 104: Line 281:
 
</head>
 
</head>
 
<body>
 
<body>
−
 
+
     <div id="loading_icon">
−
     <div id="loading_icon"><p>For basic advancement...</p></div>
+
        <!--<span>MOSFET</span>-->
−
 
+
    </div>
−
 
+
−
 
+
 
</body>
 
</body>
 
</html>
 
</html>

Latest revision as of 01:03, 9 November 2018

Template:2018_NAU-CHINA