Line 1: | Line 1: | ||
− | + | {{HZAU-China}} | |
<html> | <html> | ||
− | |||
<head> | <head> | ||
<meta charset="UTF-8"> | <meta charset="UTF-8"> | ||
Line 16: | Line 15: | ||
margin-top: 0px; | margin-top: 0px; | ||
margin-left: 0px; | margin-left: 0px; | ||
+ | background-color: rgb(249, 228, 137); | ||
} | } | ||
Line 37: | Line 37: | ||
height: 16px; | height: 16px; | ||
} | } | ||
− | |||
− | |||
div.nav_body { | div.nav_body { | ||
Line 99: | Line 97: | ||
left: auto; | left: auto; | ||
position: absolute; | position: absolute; | ||
− | top: | + | top: 44px; |
z-index: 1000; | z-index: 1000; | ||
float: left; | float: left; | ||
Line 152: | Line 150: | ||
.HZAU_logo { | .HZAU_logo { | ||
height: 36px; | height: 36px; | ||
+ | } | ||
+ | </style> | ||
+ | |||
+ | <style> | ||
+ | body { | ||
+ | background-color: rgb(249, 228, 137); | ||
+ | } | ||
+ | |||
+ | #content { | ||
+ | background-color: rgb(249, 228, 137); | ||
+ | } | ||
+ | |||
+ | div.background_page { | ||
+ | transition: opacity 1s; | ||
+ | -webkit-transition: opacity 1s; | ||
+ | } | ||
+ | |||
+ | .fourC { | ||
+ | width: 100%; | ||
+ | min-width: 950px; | ||
+ | margin-top: -2px; | ||
+ | } | ||
+ | |||
+ | .di { | ||
+ | width: 100%; | ||
+ | min-width: 950px; | ||
+ | position: relative; | ||
+ | top: 600px; | ||
+ | } | ||
+ | |||
+ | #rongqi p { | ||
+ | padding: 0; | ||
+ | margin: 0; | ||
+ | } | ||
+ | |||
+ | /*-- 轮播图整体样式-- */ | ||
+ | |||
+ | .zhanshiqu { | ||
+ | position: relative; | ||
+ | top: 400px; | ||
+ | } | ||
+ | |||
+ | /*-- 轮播图主体样式-- */ | ||
+ | |||
+ | #rongqi { | ||
+ | width: 950px; | ||
+ | height: 600px; | ||
+ | margin: 20px auto; | ||
+ | border-radius: 5px; | ||
+ | overflow: hidden; | ||
+ | position: relative; | ||
+ | } | ||
+ | |||
+ | /*-- 图片样式 --*/ | ||
+ | |||
+ | .shiying { | ||
+ | width: 950px; | ||
+ | height: 600px; | ||
+ | } | ||
+ | |||
+ | #rongqi img { | ||
+ | position: absolute; | ||
+ | top: 0; | ||
+ | left: 950px; | ||
+ | /*图片均位于右侧*/ | ||
+ | transition: left 0.3s linear; | ||
+ | /*改变left值实现动画*/ | ||
+ | } | ||
+ | |||
+ | #rongqi img.yundong { | ||
+ | left: 0; | ||
+ | } | ||
+ | |||
+ | #rongqi img.left { | ||
+ | left: -950px; | ||
+ | } | ||
+ | |||
+ | /*-- 页码样式 --*/ | ||
+ | |||
+ | #rongqi div { | ||
+ | position: absolute; | ||
+ | bottom: 0; | ||
+ | width: 100%; | ||
+ | line-height: 0; | ||
+ | text-align: center; | ||
+ | padding: 5px 0; | ||
+ | z-index: 2; | ||
+ | } | ||
+ | |||
+ | #rongqi span { | ||
+ | display: inline-block; | ||
+ | width: 15px; | ||
+ | height: 10px; | ||
+ | margin: 0 3px; | ||
+ | border-radius: 5px; | ||
+ | background: white; | ||
+ | transition: width 0.3s; | ||
+ | } | ||
+ | |||
+ | #rongqi span.yundong { | ||
+ | width: 25px; | ||
+ | background: #A08989; | ||
+ | } | ||
+ | |||
+ | /*-- 图片描述的样式 --*/ | ||
+ | |||
+ | #rongqi p { | ||
+ | position: absolute; | ||
+ | bottom: 20px; | ||
+ | width: 100%; | ||
+ | line-height: 20px; | ||
+ | font-size: 14px; | ||
+ | text-indent: 5px; | ||
+ | color: white; | ||
+ | cursor: default; | ||
+ | opacity: 0; | ||
+ | transition: opacity 0.3s linear; | ||
+ | } | ||
+ | |||
+ | #rongqi p.yundong { | ||
+ | opacity: 1; | ||
+ | } | ||
+ | |||
+ | /*--齿轮样式--*/ | ||
+ | |||
+ | .hezi { | ||
+ | position: absolute; | ||
+ | top: 20px; | ||
+ | margin: 0 50%; | ||
+ | width: 950px; | ||
+ | height: 600px; | ||
+ | left: -475px; | ||
+ | opacity: 1; | ||
+ | transition: opacity 1s; | ||
+ | } | ||
+ | |||
+ | @keyframes mymove { | ||
+ | from {} | ||
+ | to { | ||
+ | transform: rotate(360deg); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | @-webkit-keyframes mymove | ||
+ | /*Safari and Chrome*/ | ||
+ | |||
+ | { | ||
+ | from {} | ||
+ | to { | ||
+ | transform: rotate(360deg); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | @keyframes mymove_2 { | ||
+ | from {} | ||
+ | to { | ||
+ | transform: rotate(-360deg); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | @-webkit-keyframes mymove_2 | ||
+ | /*Safari and Chrome*/ | ||
+ | |||
+ | { | ||
+ | from {} | ||
+ | to { | ||
+ | transform: rotate(-360deg); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | .chilun_1 { | ||
+ | position: absolute; | ||
+ | top: -70px; | ||
+ | left: -80px; | ||
+ | width: 200px; | ||
+ | height: 200px; | ||
+ | animation: rotate 10s infinite; | ||
+ | -webkit-animation: mymove 10s infinite; | ||
+ | animation-timing-function: linear; | ||
+ | background: url(https://static.igem.org/mediawiki/2017/f/fb/HZAU_2017_gear_1.png); | ||
+ | background-size: 150px 150px; | ||
+ | background-repeat: no-repeat; | ||
+ | background-size: cover; | ||
+ | z-index: -1; | ||
+ | } | ||
+ | |||
+ | .chilun_2 { | ||
+ | position: absolute; | ||
+ | top: 115px; | ||
+ | left: -105px; | ||
+ | width: 130px; | ||
+ | height: 130px; | ||
+ | background-size: cover; | ||
+ | animation: rotate 10s infinite; | ||
+ | -webkit-animation: mymove_2 10s infinite; | ||
+ | animation-timing-function: linear; | ||
+ | background: url(https://static.igem.org/mediawiki/2017/f/fb/HZAU_2017_gear_1.png); | ||
+ | background-size: 100px 100px; | ||
+ | background-repeat: no-repeat; | ||
+ | background-size: cover; | ||
+ | z-index: -1; | ||
+ | } | ||
+ | |||
+ | .chilun_3 { | ||
+ | position: absolute; | ||
+ | bottom: 60px; | ||
+ | right: -100px; | ||
+ | width: 250px; | ||
+ | height: 250px; | ||
+ | background-size: cover; | ||
+ | animation: rotate 10s infinite; | ||
+ | -webkit-animation: mymove 10s infinite; | ||
+ | animation-timing-function: linear; | ||
+ | background: url(https://static.igem.org/mediawiki/2017/f/fb/HZAU_2017_gear_1.png); | ||
+ | background-size: 250px 250px; | ||
+ | background-repeat: no-repeat; | ||
+ | background-size: cover; | ||
+ | z-index: -1; | ||
+ | } | ||
+ | |||
+ | /*--线框样式--*/ | ||
+ | |||
+ | .frame { | ||
+ | position: absolute; | ||
+ | top: -30px; | ||
+ | margin: 0 50%; | ||
+ | width: 1020px; | ||
+ | height: 660px; | ||
+ | left: -510px; | ||
+ | z-index: 1; | ||
+ | } | ||
+ | |||
+ | .frame_tu { | ||
+ | width: 1020px; | ||
+ | height: 660px; | ||
} | } | ||
</style> | </style> | ||
Line 159: | Line 392: | ||
<div class="nav_body"> | <div class="nav_body"> | ||
<a href="https://2017.igem.org/Team:HZAU-China" class="HZAU_logo" title="logo"> | <a href="https://2017.igem.org/Team:HZAU-China" class="HZAU_logo" title="logo"> | ||
− | <img src="https://static.igem.org/mediawiki/2017/b/ | + | <img src="https://static.igem.org/mediawiki/2017/b/be/HZAU_2017_logo_1.png" height="100%"> |
</a> | </a> | ||
<ul id="nav_organ"> | <ul id="nav_organ"> | ||
Line 169: | Line 402: | ||
</li> | </li> | ||
<li class="Project menu_item"> | <li class="Project menu_item"> | ||
− | <a class="nav_tissue" href="">Project<span class="caret"></span></a> | + | <a class="nav_tissue" href="">Project |
+ | <span class="caret"></span> | ||
+ | </a> | ||
<ul class="nav_cell shadow"> | <ul class="nav_cell shadow"> | ||
<li> | <li> | ||
Line 204: | Line 439: | ||
</li> | </li> | ||
<li class="Parts menu_item"> | <li class="Parts menu_item"> | ||
− | <a class="nav_tissue" href="">Parts<span class="caret"></span></a> | + | <a class="nav_tissue" href="">Parts |
+ | <span class="caret"></span> | ||
+ | </a> | ||
<ul class="nav_cell shadow"> | <ul class="nav_cell shadow"> | ||
<li> | <li> | ||
Line 224: | Line 461: | ||
</li> | </li> | ||
<li class="HP menu_item"> | <li class="HP menu_item"> | ||
− | <a class="nav_tissue" href="">Human Practices<span class="caret"></span></a> | + | <a class="nav_tissue" href="">Human Practices |
+ | <span class="caret"></span> | ||
+ | </a> | ||
<ul class="nav_cell shadow"> | <ul class="nav_cell shadow"> | ||
<li> | <li> | ||
Line 238: | Line 477: | ||
</li> | </li> | ||
<li class="Awards menu_item"> | <li class="Awards menu_item"> | ||
− | <a class="nav_tissue" href="">Awards<span class="caret"></span></a> | + | <a class="nav_tissue" href="">Awards |
+ | <span class="caret"></span> | ||
+ | </a> | ||
<ul class="nav_cell shadow"> | <ul class="nav_cell shadow"> | ||
<li> | <li> | ||
Line 246: | Line 487: | ||
</li> | </li> | ||
<li class="Judging Form"> | <li class="Judging Form"> | ||
− | <a class="nav_tissue" href="https://igem.org/ | + | <a class="nav_tissue" href="https://2017.igem.org/Team:HZAU-China/Judging Form">Judging Form</a> |
</li> | </li> | ||
</ul> | </ul> | ||
+ | </div> | ||
+ | <div class="fourC"> | ||
+ | <img class="fourC" src="https://static.igem.org/mediawiki/2017/e/eb/HZAU_2017_4C_1.png"> | ||
+ | </div> | ||
+ | <div class="zhanshiqu"> | ||
+ | <!-- 大小齿轮们 --> | ||
+ | <div class="hezi"> | ||
+ | <div class="chilun_1"></div> | ||
+ | <div class="chilun_2"></div> | ||
+ | <div class="chilun_3"></div> | ||
+ | </div> | ||
+ | <div class="frame"> | ||
+ | <img class="frame_tu" src="https://static.igem.org/mediawiki/2017/2/23/HZAU_2017_frame_1.png" /> | ||
+ | </div> | ||
+ | <div id="rongqi"> | ||
+ | <!-- 插入轮播的图片们 --> | ||
+ | <img class="yundong shiying" src="https://static.igem.org/mediawiki/2017/4/43/HZAU_2017_luhuan1_1.png" /> | ||
+ | <img class="shiying" src="https://static.igem.org/mediawiki/2017/f/f5/HZAU_2017_luhuan2_1.png" /> | ||
+ | <img class="shiying" src="https://static.igem.org/mediawiki/2017/f/fd/HZAU_2017_luhuan3_1.png" /> | ||
+ | <!-- 插入轮播的页码们 --> | ||
+ | <div> | ||
+ | <span class="yundong" name="0"></span> | ||
+ | <span name="1"></span> | ||
+ | <span name="2"></span> | ||
+ | </div> | ||
+ | <!-- 插入图片的描述们 --> | ||
+ | <p class="yundong"></p> | ||
+ | <p></p> | ||
+ | <p></p> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div> | ||
+ | <img class="di" src="https://static.igem.org/mediawiki/2017/6/63/HZAU_2017_di_1.png"> | ||
</div> | </div> | ||
</body> | </body> | ||
+ | <script> | ||
+ | //---------主角:轮播图函数------------- | ||
+ | function rongqi() { | ||
+ | var rongqi = document.getElementById("rongqi"), | ||
+ | imgs = rongqi.getElementsByTagName("img"), //图片们 | ||
+ | pages = rongqi.getElementsByTagName("span"), //页码们 | ||
+ | descrips = rongqi.getElementsByTagName("p"), //描述们 | ||
+ | length = imgs.length, //图片数目 | ||
+ | current = 1; //current为当前活跃的图片、页码、描述的编号 | ||
+ | |||
+ | |||
+ | function changeSlide() { //切换图片的函数 | ||
+ | for (var i = 0; i < length; i++) { | ||
+ | if (i == current) { | ||
+ | imgs[i].className = "yundong shiying"; | ||
+ | pages[i].className = "yundong"; | ||
+ | descrips[i].className = "yundong"; | ||
+ | } else { | ||
+ | pages[i].className = ""; | ||
+ | descrips[i].className = ""; | ||
+ | if (i < current) { | ||
+ | imgs[i].className = "left"; | ||
+ | } else { | ||
+ | imgs[i].className = ""; | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | current++; //自增1 | ||
+ | if (current >= length) { | ||
+ | current = 0; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | //每2s调用changeSlide函数进行图片轮播 | ||
+ | var slideon = setInterval(changeSlide, 4000); | ||
+ | |||
+ | rongqi.onmouseover = function () { | ||
+ | clearInterval(slideon); //当鼠标移入时清除轮播事件 | ||
+ | } | ||
+ | rongqi.onmouseout = function () { | ||
+ | slideon = setInterval(changeSlide, 4000); //当鼠标移出时重新开始轮播事件 | ||
+ | } | ||
+ | |||
+ | for (var i = 0; i < length; i++) { //定义鼠标移入页码事件 | ||
+ | pages[i].onmouseover = function () { | ||
+ | current = this.getAttribute("name"); //得到当前鼠标指的页码 | ||
+ | changeSlide(); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | } | ||
+ | |||
+ | rongqi(); | ||
+ | </script> | ||
</html> | </html> |
Revision as of 12:40, 29 October 2017