Difference between revisions of "Template:NAU-CHINA"

 
(210 intermediate revisions by 4 users not shown)
Line 1: Line 1:
 
{{NAU-CHINA/ResetCSS}}
 
{{NAU-CHINA/ResetCSS}}
−
 
 
<html>
 
<html>
 
<head>
 
<head>
−
  <meta charset="utf-8">
+
    <meta charset="utf-8">
−
  <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" />
 +
    <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);
  
−
  <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
+
                        icon2.animate({ left: '1.6vw' }, 800);
 +
                        icon2.animate({ top: '45vh' }, 500);
  
−
  <style type="text/css">
+
                        icon3.animate({ left: '1.6vw' }, 800);
−
    /*定义加载图像的格式*/
+
                        icon3.animate({ top: '60vh' }, 500);
−
    #loading_icon {
+
−
        position: fixed;
+
−
        left: 0px;
+
−
        top: 0px;
+
−
        width: 100%;
+
−
        height: 100%;
+
−
        z-index: 9999;
+
−
        background: url("https://static.igem.org/mediawiki/2018/e/e8/T--NAU-CHINA--loadingicon.jpg") center no-repeat #fff;
+
−
        background-size: 150px;
+
−
    }
+
−
    /*————————END——————————*/
+
−
    /*图像指针为小手，并且可以点开*/
+
−
    img {
+
−
      cursor: pointer;
+
−
    }
+
−
    /*————————END——————————*/
+
−
   
+
−
    /*小图标左侧浮动*/
+
−
    .img_guide {
+
−
      float: left;
+
−
      margin: 0 20px 0 0;
+
−
    }
+
−
    /*————————END——————————*/
+
  
−
    /*指针悬停时图片上浮*/
+
                        icon4.animate({ left: '1.6vw' }, 800);
−
    .img_zoom:hover {
+
                        icon4.animate({ top: '75vh' }, 500);
−
      padding-bottom: 5px;
+
                    }
−
      transition: 0.5s;
+
                }
−
      margin-top: -5px;
+
               
−
    }
+
                if (H - h <= 1000) {
−
    /*————————END——————————*/
+
                    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);
−
    .img_guide {
+
                    icon4.animate({ top: '65vh' }, 500);
−
      transform: scale(0.8);
+
                }
−
      transition: 0.5s;
+
               
−
    }
+
            }, 10);
−
    .img_guide:hover {
+
        });
−
      transform: scale(1);
+
−
      transition: 0.5s;
+
−
    }
+
−
    /*————————END——————————*/
+
  
 +
    </script>
  
−
  </style>
 
  
 +
<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;
 +
            }
  
−
  <script>  
+
            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>
 +
 
 +
     //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');
  
−
    //制作加载图像
 
−
    $(window).load(function() {
 
−
      $("#loading_icon").fadeOut(1800);
 
 
     });
 
     });
  
−
  </script>
+
    //Page Loading...
 +
    $(document).ready(function() {
 +
        var L = $(window).width();
 +
        var lp = $("#loading_icon span").width()
 +
        //Loading Icon
 +
        $("#loading_icon").fadeOut(2000); //Aply: 2000，Debug: 1
  
 +
   
 +
        //Loading Text     
 +
        //$("#loading_icon span").css('left', (L +16 - lp)*100 / ((2 * （L+16）)) + 'vw');
  
  
−
</head>
+
    });
−
<body>
+
−
  <div id="loading_icon"></div>
+
−
 
+
  
 +
    //Ban the resize of pages
 +
/*
 +
    $(document).ready(function(){
 +
      $("body").css("min-width",1200);
 +
    });
 +
*/
  
  
 +
    </script>
  
 +
</head>
 +
<body>
 +
    <div id="loading_icon">
 +
        <!--<span>MOSFET</span>-->
 +
    </div>
 
</body>
 
</body>
 
</html>
 
</html>

Latest revision as of 01:03, 9 November 2018

Template:2018_NAU-CHINA