Line 1: | Line 1: | ||
+ | <!DOCTYPE html> | ||
<html> | <html> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | <head> | |
− | + | <meta charset="UTF-8"> | |
− | + | <style type="text/css"> | |
− | + | body { | |
− | + | padding: 0px; | |
− | + | border: 0px; | |
− | + | margin: 0px; | |
− | + | background-color: rgb(249, 228, 137); | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | <body> | + | |
− | + | ||
− | + | div.background_page { | |
− | + | transition: opacity 1s; | |
− | + | -webkit-transition: opacity 1s; | |
− | + | } | |
− | + | ||
− | + | .fourC { | |
− | + | width: 100%; | |
− | + | min-width: 950px; | |
− | + | margin-top: 25px; | |
+ | } | ||
+ | |||
+ | .di { | ||
+ | width: 100%; | ||
+ | min-width: 950px; | ||
+ | position: relative; | ||
+ | top: 600px; | ||
+ | } | ||
+ | div.nav_body { | ||
+ | position: fixed; | ||
+ | padding: 0px; | ||
+ | left: 0px; | ||
+ | top: 16px; | ||
+ | width: 100%; | ||
+ | min-width:950px; | ||
+ | height: 36px; | ||
+ | box-shadow: 0px 1px 3px #aaaaaa; | ||
+ | z-index: 1; | ||
+ | color: rgb(249,228,137); | ||
+ | text-decoration-line: none; | ||
+ | font-family: "Arial",Helvetica,sans-serif; | ||
+ | background-color: #000; | ||
+ | z-index: 99; | ||
+ | } | ||
+ | |||
+ | ul#nav_organ { | ||
+ | float: right; | ||
+ | list-style: none; | ||
+ | margin: 6px auto; | ||
+ | text-decoration-line: none; | ||
+ | font-family: "Arial",Helvetica,sans-serif; | ||
+ | color: rgb(249,228,137); | ||
+ | background-color: #000; | ||
+ | } | ||
+ | |||
+ | ul#nav_organ li { | ||
+ | display: block; | ||
+ | float: left; | ||
+ | } | ||
+ | |||
+ | a.nav_tissue { | ||
+ | padding: 8px 15px 8px 15px; | ||
+ | line-height: 20px; | ||
+ | text-decoration-line: none; | ||
+ | font-family: "Arial",Helvetica,sans-serif; | ||
+ | color: rgb(249,228,137); | ||
+ | } | ||
+ | |||
+ | span.caret { | ||
+ | display: inline-block; | ||
+ | margin-left: 2px; | ||
+ | vertical-align: middle; | ||
+ | width: 0; | ||
+ | height: 0; | ||
+ | border-left: 4px solid transparent; | ||
+ | border-right: 4px solid transparent; | ||
+ | border-top: 4px solid rgb(249,228,137); | ||
+ | } | ||
+ | |||
+ | .nav_cell { | ||
+ | visibility:hidden; | ||
+ | opacity:0; | ||
+ | display: block; | ||
+ | box-sizing: border-box; | ||
+ | left: auto; | ||
+ | position: absolute; | ||
+ | top: 100%; | ||
+ | z-index: 1000; | ||
+ | float: left; | ||
+ | min-width: 160px; | ||
+ | padding: 5px 0; | ||
+ | margin: -4px 0 0 0; | ||
+ | font-size: 14px; | ||
+ | text-align: left; | ||
+ | list-style: none; | ||
+ | color: rgb(249,228,137); | ||
+ | background-color: #000; | ||
+ | background-clip: padding-box; | ||
+ | border: 1px solid rgba(0, 0, 0, .15); | ||
+ | border-radius: 4px; | ||
+ | box-shadow: 0 6px 12px rgba(0, 0, 0, .175); | ||
+ | -webkit-transition:opacity 0.4s linear; | ||
+ | -moz-transition:opacity 0.4s linear; | ||
+ | -ms-transition:opacity 0.4s linear; | ||
+ | -o-transition:opacity 0.4s linear; | ||
+ | transition:opacity 0.4s linear; | ||
+ | } | ||
+ | .shadow{ | ||
+ | box-shadow: 0px 1px 3px rgb(249,228,137); | ||
+ | } | ||
+ | |||
+ | .nav_cell>li { | ||
+ | display: block; | ||
+ | float: left; | ||
+ | clear: both; | ||
+ | height: 30px; | ||
+ | } | ||
+ | |||
+ | .nav_cell>li>a { | ||
+ | padding-top: 3px; | ||
+ | padding-bottom: 3px; | ||
+ | padding-left: 20px; | ||
+ | padding-right: 20px; | ||
+ | text-decoration-line: none; | ||
+ | color: rgb(249,228,137); | ||
+ | } | ||
+ | |||
+ | .menu_item:hover .nav_cell { | ||
+ | visibility: visible; | ||
+ | opacity:1; | ||
+ | } | ||
+ | #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(images/gear.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(images/gear.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(images/gear.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> | ||
+ | </head> | ||
+ | |||
+ | <body> | ||
+ | <div class="nav_body"> | ||
+ | <a href="https://2017.igem.org/Team:HZAU-China" class="HZAU-logo" title="logo"><img src="https://static.igem.org/mediawiki/2017/b/be/HZAU_2017_logo_1.png" height="100%"></a> | ||
+ | <ul id="nav_organ"> | ||
+ | <li class="Home"><a class="nav_tissue" href="https://2017.igem.org/Team:HZAU-China">Home</a></li> | ||
+ | <li class="Team"><a class="nav_tissue" href="https://2017.igem.org/Team:HZAU-China/UnderConstruction">Team</a></li> | ||
+ | <li class="Project menu_item"><a class="nav_tissue" href="">Project<span class="caret"></span></a> | ||
+ | <ul class="nav_cell shadow"> | ||
+ | <li><a href="https://2017.igem.org/Team:HZAU-China/UnderConstruction">Description</a></li> | ||
+ | <li><a href="https://2017.igem.org/Team:HZAU-China/UnderConstruction">Design</a></li> | ||
+ | <li><a href="https://2017.igem.org/Team:HZAU-China/UnderConstruction">Experiments</a></li> | ||
+ | <li><a href="https://2017.igem.org/Team:HZAU-China/UnderConstruction">Notebook</a></li> | ||
+ | <li><a href="https://2017.igem.org/Team:HZAU-China/UnderConstruction">InterLab</a></li> | ||
+ | <li><a href="https://2017.igem.org/Team:HZAU-China/UnderConstruction">Model</a></li> | ||
+ | <li><a href="https://2017.igem.org/Team:HZAU-China/UnderConstruction">Results</a></li> | ||
+ | <li><a href="https://2017.igem.org/Team:HZAU-China/UnderConstruction">Demonstrate</a></li> | ||
+ | <li><a href="https://2017.igem.org/Team:HZAU-China/UnderConstruction">Improve</a></li> | ||
+ | <li><a href="https://2017.igem.org/Team:HZAU-China/UnderConstruction">Attributions</a></li> | ||
</ul> | </ul> | ||
− | + | </li> | |
− | + | <li class="Parts menu_item"><a class="nav_tissue" href="">Parts<span class="caret"></span></a> | |
− | + | <ul class="nav_cell shadow"> | |
− | + | <li><a href="https://2017.igem.org/Team:HZAU-China/UnderConstruction">Parts</a></li> | |
− | + | <li><a href="https://2017.igem.org/Team:HZAU-China/UnderConstruction">Basic Parts</a></li> | |
− | + | <li><a href="https://2017.igem.org/Team:HZAU-China/UnderConstruction">Composite Parts</a></li> | |
− | + | <li><a href="https://2017.igem.org/Team:HZAU-China/UnderConstruction">Part Collection</a></li> | |
− | + | </ul> | |
− | + | </li> | |
− | + | <li class="Safety"><a class="nav_tissue" href="">Safety</a></li> | |
− | + | <li class="HP menu_item"><a class="nav_tissue" href="">Human Practices<span class="caret"></span></a> | |
− | + | <ul class="nav_cell shadow"> | |
− | + | <li><a href="https://2017.igem.org/Team:HZAU-China/UnderConstruction">Silver HP</a></li> | |
− | + | <li> <a href="https://2017.igem.org/Team:HZAU-China/UnderConstruction">Integrated and Gold</a></li> | |
− | + | <li><a href="https://2017.igem.org/Team:HZAU-China/UnderConstruction">Public Engagement</a></li> | |
− | + | </ul> | |
− | + | </li> | |
− | + | <li class="Awards menu_item"><a class="nav_tissue" href="">Awards<span class="caret"></span></a> | |
− | + | <ul class="nav_cell shadow"> | |
− | + | <li> <a href="https://2017.igem.org/Team:HZAU-China/UnderConstruction">Hardware</a></li> | |
− | + | </ul> | |
− | + | </li> | |
− | < | + | <li class="Judging Form"><a class="nav_tissue" href="">Judging Form</a></li> |
− | + | </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> | ||
+ | </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 04:21, 19 October 2017
<!DOCTYPE html>