首先,这是我需要帮助的网站的基本代码: 检查底部以进行编辑
我想要一些关于动画本身的帮助,因为如果我在 div 1 并按任意键,它就像一个魅力。但是,如果我在 div 3 并想转到 div 2,例如,它首先加载 div 1,然后转到 div 2。我知道它为什么这样做,但我想不出办法它。有任何想法吗?
如果动画已经在播放,我还想从输入中暂停该功能(这样您就不能发送垃圾邮件并弄乱动画)。我怎么能以一种简单的方式做到这一点?
谢谢!
编辑
由于一些非常好的人要求我不要偷懒,OP 提供:http: //jsfiddle.net/G4PXj/7
还; http://codepen.io/anon/pen/zJsBH
此外,按下 HTML 框,然后按下 2,3 或 4 并等待几秒钟让动画加载到 FOV 中。
HTML:
<div id="fourth" class="hidden">Fourth box
<button onClick="fubar('first');">First page</button>
</div>
<div id="third" class="hidden">Third div</div>
<div id="second" class="hidden">Som text in the second</div>
<div id="first">Some content
<button onClick="fubar('second');">Second page</button>
</div>
风格:
@charset "utf-8";
body {
background-color: #fff;
margin: 0;
padding: 0;
overflow: hidden;
}
#first {
width: 100%;
height: 100%;
position: absolute;
top: 0;
color: #fff;
box-shadow: 0 0 40px #333;
background-color: #000;
}
#second {
width: 100%;
height: 100%;
position: absolute;
top: 0;
background-color: green;
}
#third {
width: 100%;
height: 100%;
position: absolute;
top: 0;
background-color: red;
}
#fourth {
width: 100%;
height: 100%;
position: absolute;
top: 0;
background-color: blue;
}
.hidden {
display: none;
}
.test {
-moz-animation-name: wat;
-webkit-animation-name: wat;
-moz-animation-duration: 4s;
-webkit-animation-duration: 4s;
-moz-animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
-moz-animation-iteration-count: 1;
-webkit-animation-iteration-count: 1;
-moz-animation-direction: normal;
-webkit-animation-direction: normal;
z-index: 100;
display: block;
}
@-moz-keyframes wat {
0% {margin-left:-3000px;}
60% {margin-left: 200px;}
100% {margin-left: 0;}
}
@-webkit-keyframes wat {
0% {margin-left:-3000px;}
60% {margin-left: 200px;}
100% {margin-left: 0;}
}
Javascript:
function clearAll() {
document.getElementById('first').className = '';
document.getElementById('second').className = '';
document.getElementById('third').className = '';
document.getElementById('fourth').className = '';
}
function troll(objectID) {
document.getElementById(objectID).className += ' test';
}
function fubar(objectID) {
clearAll();
troll(objectID);
}
function KeyCheck(e) {
var KeyID = (window.event) ? event.keyCode : e.keyCode;
switch (KeyID) {
case 49:
clearAll();
troll('first');
break;
case 50:
clearAll();
troll('second');
break;
case 51:
clearAll();
troll('third');
break;
case 52:
clearAll();
troll('fourth');
break;
}
}
document.onkeyup = KeyCheck;