Difference between revisions of "Team:NUDT CHINA"
| Line 7: | Line 7: | ||
<title>Team:NUDT_CHINA</title> | <title>Team:NUDT_CHINA</title> | ||
<script type="text/javascript" > | <script type="text/javascript" > | ||
| − | + | window.onload=function(){ | |
var oContent = $('content'); | var oContent = $('content'); | ||
var oLoading = $('loading'); | var oLoading = $('loading'); | ||
| Line 16: | Line 16: | ||
var oHomeContent1 = getByClass(oHomeContent , 'homeContent1')[0]; | var oHomeContent1 = getByClass(oHomeContent , 'homeContent1')[0]; | ||
var oHomeContent2 = getByClass(oHomeContent , 'homeContent2')[0]; | var oHomeContent2 = getByClass(oHomeContent , 'homeContent2')[0]; | ||
| − | |||
var oMenu = $('lay-menu'); | var oMenu = $('lay-menu'); | ||
| + | var oNextBtn=$('next-button'); | ||
var aLiMenu = oMenu.getElementsByTagName('li'); | var aLiMenu = oMenu.getElementsByTagName('li'); | ||
| Line 28: | Line 28: | ||
mouseWheel(); | mouseWheel(); | ||
homeContent(); | homeContent(); | ||
| + | add1(); | ||
window.onresize = fnResize; | window.onresize = fnResize; | ||
| + | function add1() { | ||
| + | oNextBtn.onclick=function () { | ||
| + | showLoading(); | ||
| + | }; | ||
| + | } | ||
function showLoading(){ | function showLoading(){ | ||
| Line 62: | Line 68: | ||
} | } | ||
} | } | ||
| − | |||
function toMove(index){ | function toMove(index){ | ||
oList.style.top = - index * iContentHeight + 'px'; | oList.style.top = - index * iContentHeight + 'px'; | ||
| Line 245: | Line 250: | ||
return arr; | return arr; | ||
} | } | ||
| − | } | + | } |
</script> | </script> | ||
<style type="text/css"> | <style type="text/css"> | ||
| − | + | .bottom-button{position: fixed;bottom: 0;text-align: center;} | |
| + | .next-button { | ||
| + | display: inline-block; | ||
| + | width: 120px; | ||
| + | height: 120px; | ||
| + | line-height: 120px; | ||
| + | background: -webkit-linear-gradient(#fe5f95 , #ff3f7f); | ||
| + | background: linear-gradient(#fe5f95 , #ff3f7f); | ||
| + | border: 1px solid #fe3276; | ||
| + | border-radius: 50%; | ||
| + | color: #fff; | ||
| + | text-decoration: none; | ||
| + | text-align: center; | ||
| + | } | ||
| + | .next-button:hover { | ||
| + | -webkit-animation: scale .3s ease-in-out; | ||
| + | animation: scale .3s ease-in-out; | ||
| + | } | ||
| + | @-webkit-keyframes scale { | ||
| + | 50% { -webkit-transform: scale(1.1); } | ||
| + | } | ||
| + | @keyframes scale { | ||
| + | 50% { transform: scale(1.1); } | ||
| + | } | ||
| + | </style> | ||
| + | <style type="text/css"> | ||
| + | li{ list-style:none;} | ||
#Qidilist{ width:100%; position:absolute; top:0; left:0; transition:.5s top;} | #Qidilist{ width:100%; position:absolute; top:0; left:0; transition:.5s top;} | ||
| − | #Qidilist .liList{ width:2000px; position:relative; left:50%; margin-left:- | + | #Qidilist .liList{ width:2000px; position:relative; left:50%; margin-left:-900px; overflow:hidden;} |
#lay-menu{ position:fixed; right:0; top:50%; z-index:20;} | #lay-menu{ position:fixed; right:0; top:50%; z-index:20;} | ||
#lay-menu li{ width:10px; height:10px; border-radius:50%; margin:10px; border:1px white solid; cursor:pointer;} | #lay-menu li{ width:10px; height:10px; border-radius:50%; margin:10px; border:1px white solid; cursor:pointer;} | ||
#lay-menu li.active{ background:white; cursor:default;} | #lay-menu li.active{ background:white; cursor:default;} | ||
#home{ background:url(img/bg1.jpg) no-repeat; overflow-x: hidden;top: 0px;height: 100%} | #home{ background:url(img/bg1.jpg) no-repeat; overflow-x: hidden;top: 0px;height: 100%} | ||
| + | #abstract{ background:url(bg-img1.jpg) ; overflow-x: hidden;top: 0px;height: 100%} | ||
#homeContent .homeContent1{ width:100%; height:100%; position:relative; perspective:800px; transform-style:preserve-3d; -webkit-perspective:800px; -webkit-transform-style:preserve-3d; transition:1s;} | #homeContent .homeContent1{ width:100%; height:100%; position:relative; perspective:800px; transform-style:preserve-3d; -webkit-perspective:800px; -webkit-transform-style:preserve-3d; transition:1s;} | ||
#homeContent .homeContent1 li{ width:100%; height:100%; position:absolute; left:0; top:0; background:black; visibility:hidden;} | #homeContent .homeContent1 li{ width:100%; height:100%; position:absolute; left:0; top:0; background:black; visibility:hidden;} | ||
| Line 317: | Line 349: | ||
100%{ -webkit-transform:translateZ(-200px);} | 100%{ -webkit-transform:translateZ(-200px);} | ||
} | } | ||
| − | /* home end */ | + | /* home end */ |
</style> | </style> | ||
| Line 323: | Line 355: | ||
| − | #loading div{ width:100%; height:50%; position:absolute; left:0; background:#009ee0; z-index:50; transition:1s;} | + | #loading div{ width:100%; height:50%; position:absolute; left:0; background:#009ee0; z-index:50; transition:1s;text-align: center;} |
#loading div:nth-of-type(1){ top:0;} | #loading div:nth-of-type(1){ top:0;} | ||
#loading div:nth-of-type(2){ bottom:0;} | #loading div:nth-of-type(2){ bottom:0;} | ||
| Line 351: | Line 383: | ||
<div></div> | <div></div> | ||
<div> | <div> | ||
| + | <a class="next-button" id="next-button">Button</a> | ||
</div> | </div> | ||
<span></span> | <span></span> | ||
| Line 428: | Line 461: | ||
<li></li> | <li></li> | ||
<li></li> | <li></li> | ||
| − | </ul> | + | </ul> <ul id="Qidilist"> |
| − | + | ||
<li id="abstract" class="liList"> | <li id="abstract" class="liList"> | ||
Revision as of 23:59, 17 October 2017
