我在我的网站上设置了 3 个 div,目前我正在使用 CSS3 通过更改背景颜色来突出显示每个 div 5 秒。所以第一个 div 突出显示 5 秒,然后是第二个,然后是第三个。我可以用 Javascript 实现同样的目标吗?
我的html是
<a href=""><div class="highlight" id="caption2">
Text1
</div></a>
<a href=""><div class="highlight" id="caption3">
Text2</div></a>
<a href="">
<div class="highlight" id="caption4">
Text3</div></a>
Js
$("div.highlight").each(function (i) {
var $self = $(this);
setTimeout(function () {
$self.removeClass("highlight")
$self.addClass("caption");
setTimeout(function () {
$self.addClass("highlight");
$self.removeClass("caption");
}, 1000);
}, i * 1000);
});
CSS
#caption2 {
position:absolute;
top:10px;
left:-20px;
z-index:50;
padding-left:10px;
padding-right:20px;
padding-top:15px;
padding-bottom:15px;
color:#fff;
font-family: 'Droid Sans', sans-serif;
overflow:hidden;
}
#caption3 {
position:absolute;
top:70px;
left:-20px;
z-index:70;
padding-left:10px;
padding-right:20px;
padding-top:15px;
padding-bottom:15px;
color:#fff;
font-family: 'Droid Sans', sans-serif;
overflow:hidden;
}
#caption4 {
position:absolute;
top:130px;
left:-20px;
z-index:50;
padding-left:10px;
padding-right:20px;
padding-top:15px;
padding-bottom:15px;
color:#fff;
font-family: 'Droid Sans', sans-serif;
overflow:hidden;
}
.highlight {
background-color:#000;
}
.caption {
background-color:#f1583c;
color:yellow;
}
最佳答案
当然可以!没有比这更简单的了:
var divs = document.getElementsByTagName("div")
for(var i = 0; i < divs.length; i++) {
setTimeout(function(n){
divs[n].className = "highlight";
}, i * 1000, i);
}
http://fiddle.jshell.net/e4Qv4/
或者如果你想让它更像 jQuery,可以这样:
$("div").each(function(i){
var self = this;
setTimeout(function(){
self.className = "highlight";
}, i * 1000);
});
http://fiddle.jshell.net/e4Qv4/1/
更新
您的主要问题是 css-selector 特异性... ID 比类获得更高的比率。另一件事是,您误解了我的解决方案。阅读一些关于内置于 jQuery 中的 Sizzle-Selector 引擎的内容,它应该对您有所帮助。
关于javascript - 使用 Javascript 的背景颜色自动循环,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17029098/