Difference between revisions of "Template:NAU-CHINA"

Line 2: Line 2:
 
<html>
 
<html>
 
<head>
 
<head>
−
  <meta charset="utf-8">
+
    <meta charset="utf-8">
−
  <title>Template:2018_NAU-CHINA</title>
+
    <title>Template:2018_NAU-CHINA</title>
−
  <style type="text/css">
+
    <script src="https://code.jquery.com/jquery-3.3.1.js"
−
    body {
+
            integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
−
      overflow-y: hidden;
+
            crossorigin="anonymous">
−
    }
+
    </script>
−
    #mw-content-text {
+
    <style type="text/css">
−
      margin:120px 0 0 0;
+
        body {
−
    }
+
            overflow-y: hidden;
 +
        }
  
−
    /*定义加载图像的格式*/
+
        #mw-content-text {
−
    #loading_icon {
+
            margin: 120px 0 0 0;
−
        position: fixed;
+
         }
−
        left: 0px;
+
−
        top: 0px;
+
−
        width: 100%;
+
−
        height: 100%;
+
−
        z-index: 9999;
+
−
        background: url("https://static.igem.org/mediawiki/2018/0/0c/T--NAU-CHINA--loading_icon.gif") center no-repeat black;
+
−
         background-size: 300px;
+
−
    }
+
−
#loading_icon p{
+
−
position:fixed;
+
−
top:70%;
+
−
left:40%;
+
−
font-size:50px;
+
−
color:white;
+
−
text-align:center;
+
−
}
+
  
 +
        /*定义加载图像的格式*/
 +
        #loading_icon {
 +
            position: fixed;
 +
            left: 0px;
 +
            top: 0px;
 +
            width: 100%;
 +
            height: 100%;
 +
            z-index: 9999;
 +
            background: url("https://static.igem.org/mediawiki/2018/0/0c/T--NAU-CHINA--loading_icon.gif") center no-repeat black;
 +
            background-size: 300px;
 +
        }
 +
        /*定义加载文字的格式*/
 +
        #loading_icon p {
 +
            position: fixed;
 +
            top: 62%;
 +
            left: 10%;
 +
            font-size: 3em;
 +
            font-family: 'Vladimir Script','Rage Italic','sans-serif';
 +
            color:white;
 +
            text-align:center;
 +
        }
  
−
    /*图像指针为小手，并且可以点开*/
 
−
    img.zoom {
 
−
      cursor: pointer;
 
−
    }
 
−
    /*————————END——————————*/
 
  
−
    /*指针悬停时图片上浮*/
+
        /*图像指针为小手，并且可以点开*/
−
    .img_zoom:hover {
+
        img.zoom {
−
      padding-bottom: 5px;
+
            cursor: pointer;
−
      transition: 0.5s;
+
        }
−
      margin-top: -5px;
+
−
    }
+
−
    /*————————END——————————*/
+
  
−
    /*小图标左侧浮动*/
+
        /*指针悬停时图片上浮*/
−
    .img_guide {
+
        .img_zoom:hover {
−
      float: left;
+
            padding-bottom: 5px;
−
      margin: 0 20px 0 0;
+
            transition: 0.5s;
−
    }
+
            margin-top: -5px;
−
    /*————————END——————————*/
+
        }
  
−
    /*小图标移动放大*/
+
        /*小图标左侧浮动*/
−
    .img_guide {
+
        .img_guide {
−
      transform: scale(0.8);
+
            float: left;
−
      transition: 0.5s;
+
            margin: 0 20px 0 0;
−
    }
+
        }
−
    .img_guide:hover {
+
−
      transform: scale(1);
+
−
      transition: 0.5s;
+
−
    }
+
−
    /*————————END——————————*/
+
  
 +
        /*小图标移动放大*/
 +
        .img_guide {
 +
            transform: scale(0.8);
 +
            transition: 0.5s;
 +
        }
  
−
  </style>
+
        .img_guide:hover {
 +
            transform: scale(1);
 +
            transition: 0.5s;
 +
        }
 +
  
 +
    </style>
 +
 +
 +
    <script>
  
−
  <script>
 
 
     //更改地址栏图标
 
     //更改地址栏图标
 
     $( document ).ready( function() {
 
     $( document ).ready( function() {
Line 75: Line 80:
 
     });
 
     });
  
−
     //制作加载图像
+
     //加载页面
−
     $(window).load(function() {
+
     $(document).ready(function() {
−
      $("#loading_icon").fadeOut(20000); //应用2000，调试1
+
        //加载图像
 +
        $("#loading_icon").fadeOut(1000); //应用2000，调试1
 +
        //加载文字
 +
        var l = $(window).width();
 +
        var l2 = $("#loading_icon p").width()
 +
        $("#loading_icon p").css("left", (l - l2) / 2 + "px");
 +
 
 +
 
 
     });
 
     });
  
Line 86: Line 98:
  
  
−
</script>
+
 
 +
    </script>
  
 
</head>
 
</head>
 
<body>
 
<body>
  
−
  <div id="loading_icon"><p>For basic advancement..</p></div>
+
    <div id="loading_icon"><p>For basic advancement...</p></div>
−
 
+
−
 
+
−
 
+
  
  

Revision as of 17:14, 12 October 2018

Template:2018_NAU-CHINA

For basic advancement...