<分区>
关闭 9 年前。
- 要求提供代码的问题必须表现出对所解决问题的最低限度的理解。包括尝试过的解决方案、为什么它们不起作用，以及预期结果。另请参阅:Stack Overflow question checklist
- 关于您编写的代码问题的问题必须在问题本身中描述具体问题 — 并且包括有效代码 以重现它。参见 SSCCE.org寻求指导。
标签 javascript css html
<分区>
关闭 9 年前。
好的，所以我希望这两个 div 每三秒钟切换一次。我的问题是:我应该如何在 JavaScript 中执行此操作？我想创建频闪灯效果。请忽略我代码中的小错误，我还没有完全完成。
<!DOCTYPE html>
<html>
<head>
<title>STROBE</title>
<style>
#strobe {
animation-name: blinker;
animation-duration: 0.2s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: alternate;
width:100%;
height:100%;
padding:0;
margin:0;
border: 1px solid blue;
-webkit-animation-name: blinker;
-webkit-animation-duration: 0.06s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
}
@-webkit-keyframes blinker {
0% { background-color:green; }
25% { background-color:#5D96FF; }
50% { background-color:F0BE00; }
75% { background-color:#710595; }
100% { background-color:red; }
}
@keyframes blinker {
0% { background-color:green; }
25% { background-color:#5D96FF; }
50% { background-color:F0BE00; }
75% { background-color:#710595; }
100% { background-color:red; }
}
#baw {
animation-name: bw;
animation-duration: 1s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: alternate;
width:100%;
height:100%;
padding:0;
margin:0;
border: 1px solid red;
-webkit-animation-name: bw;
-webkit-animation-duration: 0.06s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
}
@-webkit-keyframes bw {
0% { background-color:black; }
100% { background-color:white; }
}
@keyframes bw {
0% { background-color:black; }
100% { background-color:white; }
}
</style>
</head>
<body style="width:100%;height:1800px;">
<div id="strobe"></div>
<div id="baw";></div>
</body>
</html>
最佳答案
您可以使用 javascript 计时 ( http://www.w3schools.com/js/js_timing.asp )。
在该函数中，您可以定义每个 div 的可见性。例如:
var visible = true;
setInterval(function(){
document.getElementById('strobe').style.visibility = visible ? 'hidden' : 'visible'; // use short if/else to decide which value to user
document.getElementById('baw').style.visibility = visible ? 'visible' : 'hidden'; // short if/else is called ternairy
visible = !visible; // reverse the value of itself
}, 3000);
希望对您有所帮助。
编辑:修改为使用 javascript(不是 jQuery)获得可见性
Martijn 编辑:用户 ternairy 大大缩短了代码。
关于javascript - 使用javascript在两个div之间自动切换，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20469643/