(172 intermediate revisions by 3 users not shown) | |||
Line 1: | Line 1: | ||
{{NAU-CHINA/ResetCSS}} | {{NAU-CHINA/ResetCSS}} | ||
− | |||
<html> | <html> | ||
<head> | <head> | ||
− | + | <meta charset="utf-8"> | |
− | + | <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); | ||
− | + | 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> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | <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; | ||
+ | } | ||
− | + | 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() { | ||
+ | $('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() { | ||
+ | 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'); | ||
+ | |||
+ | |||
+ | }); | ||
+ | |||
+ | //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