Difference between revisions of "Template:NAU-CHINA"

Latest revision as of 01:03, 9 November 2018

Template:2018_NAU-CHINA

@@ Line 10: / Line 10: @@
              var icon2 = $('#icon2');
              var icon3 = $('#icon3');
+            var icon4 = $('#icon4');
              setInterval(function() {
                  var h = $(window).scrollTop();
-                 if (h >= 200 && h < 600) {
+                 var H = $(document).height();
-                    icon1.animate({ left: '10vw' }, 800);
+                if (h < 500) {
-                    icon1.animate({ top: '30vh' }, 500);
+                    if (h >= 200) {
+                        icon1.animate({ left: '1.6vw' }, 800);
+                        icon1.animate({ top: '30vh' }, 500);
-                    icon2.animate({ left: '10vw' }, 800);
+                        icon2.animate({ left: '1.6vw' }, 800);
-                    icon2.animate({ top: '40vh' }, 500);
+                        icon2.animate({ top: '45vh' }, 500);
-                    icon3.animate({ left: '10vw' }, 800);
+                        icon3.animate({ left: '1.6vw' }, 800);
-                    icon3.animate({ top: '50vh' }, 500);
+                        icon3.animate({ top: '60vh' }, 500);
+                        icon4.animate({ left: '1.6vw' }, 800);
+                        icon4.animate({ top: '75vh' }, 500);
+                    }
                  }
-                 if (h >= 1500) {
+                 if (H - h <= 1000) {
                      icon1.animate({ top: '80vh' }, 500);
                      icon1.animate({ left: '35vw' }, 800);
@@ Line 31: / Line 39: @@
                      icon3.animate({ top: '80vh' }, 500);
                      icon3.animate({ left: '55vw' }, 800);
+                    icon4.animate({ left: '5vw' }, 800);
+                    icon4.animate({ top: '65vh' }, 500);
                  }
-             }, 100);
+             }, 10);
          });
@@ Line 40: / Line 52: @@
 <style>
          #icon1 {
-             top: 20vh;
+             top: 60vh;
              left: 35vw;
          }
          #icon2 {
-             top: 20vh;
+             top: 60vh;
              left: 45vw;
          }
          #icon3 {
-             top: 20vh;
+             top: 60vh;
              left: 55vw;
+        }
+        #icon4 {
+            top: 60vh;
+            left: 65vw;
          }
          @keyframes toSide {
@@ Line 63: / Line 79: @@
          .guide-icon {
-             width: 50px;
+             width: 80px;
              position: fixed;
+            z-index:999;
+            background-color:rgba(245,245,245,0.5);
+            border-radius:10%;
          }
 /*==========================Global===============================*/
@@ Line 74: / Line 94: @@
 #mw-content-text {
      margin: 60px 0 0 0;
-}
-figure img {
-    width:100%;
 }
@@ Line 87: / Line 103: @@
      margin:0 !important;
      position: absolute !important;
+    font-family:sans-serif !important;
      font-size: 9vw !important;
-    color: #a01111 !important;
      top:42vh !important;
      left:9vw !important;
@@ Line 97: / Line 113: @@
      font-size: 4vw !important;
      color: #000000 !important;
-     top:63vh !important;
+     top:72vh !important;
      left:27vw !important;
 }
@@ Line 108: / Line 124: @@
      width: 100%;
      height: 100%;
-     z-index: 9999;
+     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%;
@@ Line 138: / Line 154: @@
 }
-/*小图标左侧浮动*/
-.img_guide {
-    float: left;
-    margin: 0 20px 0 0;
-}
 /*小图标移动放大*/
@@ Line 159: / Line 170: @@
 .main-content {
-     margin:0 10% 0 10%;
+     margin:0 14%;
      text-align:justify;
 }
-img {
-     display: block;
+figure {
-     margin: 0 auto;
+     margin-top:15px !important;
+     margin-bottom:30px !important;
 }
 figure img {
      display: block;
      margin:15px auto 15px auto;
      /*width:800px;*/
-}
-figure {
-    /*background-color:whitesmoke;*/
-    margin-top:15px;
-    margin-bottom:30px;
-    /*border:dotted 1px #000;*/
 }
 figcaption {
-    font-size: 1.2em;
+     text-align: justify;
-     text-align: center;
      font-family: 'Times New Roman','sans-serif';
+    font-size:0.9em;
+    line-height:1.2em;
 }
 ._table {
@@ Line 199: / Line 208: @@
      font-size:48px;
      font-weight:bold !important;
+    line-height:60px !important;
 }
@@ Line 205: / Line 215: @@
      margin:19px 0 !important;
      font-weight:bold !important;
+    line-height:30px !important;
 }
-#HQ_page p {font-size:19.2px;}
 .main-content p {
      font-family: 'Avenir Light','Helvetica',sans-serif !important;
-     /*font-size: 1.2em !important;*/
+     font-size: 20px !important;
-     line-height:2em;
+     line-height: 1.7em;
+    text-align: justify !important;
+    margin-bottom: 2em;
 }
-.scale img{
+.main-content a {
-  background-size:contain|cover;
+    color:blue !important;
-  width:100%;
-  height: auto;
 }
+.photo {
+    width:100%;
+    margin:0 auto;
+}
+.hp-photo {
+    width:700px;
+    margin:0 15%;
+}
+.divvideo,video {
+    text-align:center;
+}
 </style>
@@ Line 239: / Line 260: @@
          var lp = $("#loading_icon span").width()
          //Loading Icon
-         $("#loading_icon").fadeOut(1); //Aply: 2000，Debug: 1
+         $("#loading_icon").fadeOut(2000); //Aply: 2000，Debug: 1
@@ Line 261: / Line 282: @@
 <body>
      <div id="loading_icon">
-         <span>MOSFET</span>
+         <!--<span>MOSFET</span>-->
      </div>
 </body>
 </html>