(44 intermediate revisions by the same user not shown) | |||
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: 48px auto 0 auto; | |
+ | } | ||
− | + | .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; | ||
+ | margin: -350px auto 0 auto; | ||
+ | vertical-align: middle; | ||
+ | } | ||
− | + | #rongqi p { | |
− | + | padding: 0; | |
− | + | margin: 0; | |
+ | } | ||
− | + | /*-- 轮播图整体样式-- */ | |
− | + | ||
− | + | ||
− | + | .zhanshiqu { | |
− | + | position: relative; | |
− | + | } | |
− | + | /*-- 轮播图主体样式-- */ | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | .bianda { | |
− | + | width: 1200px; | |
− | + | margin: 300px auto 0 auto; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | #rongqi { | |
− | + | width: 950px; | |
− | + | height: 570px; | |
− | + | margin: 0 auto; | |
− | + | border-radius: 5px; | |
− | + | overflow: hidden; | |
− | + | position: relative; | |
+ | } | ||
− | + | /*-- 图片样式 --*/ | |
− | + | ||
− | + | ||
− | + | .shiying { | |
− | + | width: 950px; | |
− | + | height: 570px; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | #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 { |
− | </style> | + | position: absolute; |
+ | bottom: 0; | ||
+ | width: 100%; | ||
+ | line-height: 0; | ||
+ | text-align: center; | ||
+ | padding: 5px 0; | ||
+ | z-index: 2; | ||
+ | } | ||
+ | |||
+ | #rongqi span { | ||
+ | display: inline-block; | ||
+ | width: 50px; | ||
+ | height: 22px; | ||
+ | margin: 0 10px; | ||
+ | border-radius: 11px; | ||
+ | background: white; | ||
+ | transition: width 0.3s; | ||
+ | } | ||
+ | |||
+ | #rongqi span.yundong { | ||
+ | width: 78px; | ||
+ | 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: 630px; | ||
+ | left: -510px; | ||
+ | z-index: 1; | ||
+ | } | ||
+ | |||
+ | .frame_tu { | ||
+ | width: 1020px; | ||
+ | height: 630px; | ||
+ | } | ||
+ | </style> | ||
</head> | </head> | ||
<body> | <body> | ||
− | + | <div class="fourC_div"> | |
− | + | <img class="fourC" src="https://static.igem.org/mediawiki/2017/8/8d/T--HZAU-China--4C.gif"> | |
− | <div | + | <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="bianda"> | ||
+ | <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/6/64/T--HZAU-China--confirm2.png" /> | ||
+ | <img class="shiying" src="https://static.igem.org/mediawiki/2017/4/4a/T--HZAU-China--confirm3.png" /> | ||
+ | <img class="shiying" src="https://static.igem.org/mediawiki/2017/8/88/T--HZAU-China--confirm4.png" /> | ||
+ | <!-- 插入轮播的页码们 --> | ||
+ | <div style="top: 543px;"> | ||
+ | <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> | ||
+ | <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, 60000); | ||
+ | |||
+ | rongqi.onmouseover = function () { | ||
+ | clearInterval(slideon); //当鼠标移入时清除轮播事件 | ||
+ | } | ||
+ | rongqi.onmouseout = function () { | ||
+ | slideon = setInterval(changeSlide, 60000); //当鼠标移出时重新开始轮播事件 | ||
+ | } | ||
+ | |||
+ | for (var i = 0; i < length; i++) { //定义鼠标移入页码事件 | ||
+ | pages[i].onmouseover = function () { | ||
+ | current = this.getAttribute("name"); //得到当前鼠标指的页码 | ||
+ | changeSlide(); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | } | ||
+ | |||
+ | rongqi(); | ||
+ | |||
+ | </script> | ||
+ | |||
</html> | </html> |
Latest revision as of 01:31, 2 November 2017