Line 1: | Line 1: | ||
+ | {{HZAU-China}} | ||
<html> | <html> | ||
<head> | <head> | ||
− | + | <meta charset="UTF-8"> | |
− | + | <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_div { | |
− | + | width: 100%; | |
− | + | margin-top: 48px; | |
+ | } | ||
− | + | .fourC { | |
− | + | width: 100%; | |
− | + | height: auto; | |
+ | } | ||
− | |||
− | |||
− | |||
+ | #anniu { | ||
+ | position: relative; | ||
+ | top: 70px; | ||
+ | transition: top 0.2s; | ||
+ | left: 50%; | ||
+ | margin: 0 0 0 -50px; | ||
+ | } | ||
+ | #anniu>img{ | ||
+ | height:100px; | ||
+ | } | ||
+ | #anniu:hover { | ||
+ | top: 90px; | ||
+ | } | ||
− | + | .di { | |
− | + | width: 100%; | |
− | + | 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; |
− | </style> | + | 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); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | @-moz-keyframes mymove { | ||
+ | from {} | ||
+ | to { | ||
+ | transform: rotate(360deg); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | @-webkit-keyframes mymove { | ||
+ | from {} | ||
+ | to { | ||
+ | transform: rotate(360deg); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | @-o-keyframes mymove { | ||
+ | from {} | ||
+ | to { | ||
+ | transform: rotate(360deg); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | @keyframes mymove_2 { | ||
+ | from {} | ||
+ | to { | ||
+ | transform: rotate(-360deg); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | @-moz-keyframes mymove_2 { | ||
+ | from {} | ||
+ | to { | ||
+ | transform: rotate(-360deg); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | @-webkit-keyframes mymove_2 { | ||
+ | from {} | ||
+ | to { | ||
+ | transform: rotate(-360deg); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | @-o-keyframes mymove_2 { | ||
+ | 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/c/c0/T--HZAU-China--gear.png); | ||
+ | background-size: 250px 250px; | ||
+ | background-repeat: no-repeat; | ||
+ | background-size: cover; | ||
+ | z-index: -1; | ||
+ | } | ||
+ | |||
+ | #tiaozhuan { | ||
+ | position: absolute; | ||
+ | top: -135px; | ||
+ | } | ||
+ | |||
+ | /*--线框样式--*/ | ||
+ | |||
+ | .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> | </head> | ||
<body> | <body> | ||
− | + | <div class="fourC_div"> | |
− | + | <img class="fourC" src="https://static.igem.org/mediawiki/2017/8/84/T--HZAU-China--4C.png"> | |
− | + | <div> | |
− | + | <a id="anniu" href="#tiaozhuan"><img src="https://static.igem.org/mediawiki/2017/7/7e/T--HZAU-China--arrow.gif"></a> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
</div> | </div> | ||
+ | </div> | ||
+ | <div class="zhanshiqu"> | ||
+ | <!-- 大小齿轮们 --> | ||
+ | <div class="hezi"> | ||
+ | <div id="tiaozhuan"></div> | ||
+ | <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/1/17/T--HZAU-China--frame.png" /> | ||
+ | </div> | ||
+ | <div id="rongqi"> | ||
+ | <!-- 插入轮播的图片们 --> | ||
+ | <img class="yundong shiying" src="https://static.igem.org/mediawiki/2017/7/7b/T--HZAU-China--zhouqi1.gif" /> | ||
+ | <img class="shiying" src="https://static.igem.org/mediawiki/2017/d/d9/T--HZAU-China--dCas91.gif" /> | ||
+ | <img class="shiying" src="https://static.igem.org/mediawiki/2017/3/35/T--HZAU-China--guangkong1.gif" /> | ||
+ | <!-- 插入轮播的页码们 --> | ||
+ | <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/c/c7/T--HZAU-China--di.png"> | ||
+ | </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, 8000); | ||
+ | |||
+ | rongqi.onmouseover = function () { | ||
+ | clearInterval(slideon); //当鼠标移入时清除轮播事件 | ||
+ | } | ||
+ | rongqi.onmouseout = function () { | ||
+ | slideon = setInterval(changeSlide, 8000); //当鼠标移出时重新开始轮播事件 | ||
+ | } | ||
+ | |||
+ | for (var i = 0; i < length; i++) { //定义鼠标移入页码事件 | ||
+ | pages[i].onmouseover = function () { | ||
+ | current = this.getAttribute("name"); //得到当前鼠标指的页码 | ||
+ | changeSlide(); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | } | ||
+ | |||
+ | rongqi(); | ||
+ | </script> | ||
</html> | </html> |
Revision as of 19:03, 31 October 2017