**关闭。**这个问题是not reproducible or was caused by typos。目前不接受答复。
此问题是由打印错误或无法再重现的问题引起的。虽然类似的问题可能是on-topic在这里，这一个是解决的方式不太可能帮助未来的读者。
5天前关闭。
Improve this question
我可以得到的跨度滚动抛出所有的话，但最后一个字。我需要这个词留在屏幕上，但我不能让它显示或停留。
除了最后一个字，卷轴工作得很好。我希望它显示，因为我有不透明度设置为0，并在其设置为1褪色。
我不知道我在这个代码中缺少了什么。
<div id="scrollTextContainer">
<span id="harderWord"><h2>Harder</h2></span>
<span class="scrollWord"><h2>Play</h2></span>
<span class="scrollWord"><h2>Think</h2></span>
<span class="scrollWord"><h2>Learn</h2></span>
<span class="scrollWord"><h2>Train</h2></span>
<span class="scrollWord"><h2>Fight</h2></span>
<span class="scrollWord"><h2>Recover</h></span>
<span class="scrollWord lastWord"><h2>Play</h2></span>
</div>
<style>
#scrollTextContainer {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
line-height: 2.5;
color: black;
width: 100%;
height: 75px;
overflow: show;
}
#harderWord {
opacity: 0;
transition: opacity 1s ease-in-out;
}
.scrollWord {
opacity: 0;
transition: opacity 1s ease-in-out;
position: absolute;
left: 5%;
top: 0;
}
.harderWord, span {
font-family: Montserrat, sans-serif;
font-size: 24px;
line-height: 2.5;
}
.scrollWord, span {
font-family: Montserrat, sans-serif;
font-size: 24px;
line-height: 2.5;
}
.lastWord span {
font-family: Montserrat, sans-serif;
font-size: 24px;
line-height: 2.5;
position: absolute;
left: 50%;
top: 0;
transform: translateX(-50%);
opacity: 0;
z-index: 1;
transition: opacity 1s ease-in-out;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
window.onload = function() {
var container = document.getElementById("scrollTextContainer");
var harderWord = document.getElementById("harderWord");
var scrollWords = document.getElementsByClassName("scrollWord");
var lastWord = document.getElementsByClassName("lastWord")[0];
// Fade in the harder word at 20 seconds and always show it
setTimeout(function() {
harderWord.style.opacity = 1;
}, 10000);
// Fade in and out the other words at specified intervals
setTimeout(function() {
scrollWords[0].style.opacity = 1;
}, 16000);
setTimeout(function() {
scrollWords[0].style.opacity = 0;
setTimeout(function() {
scrollWords[1].style.opacity = 1;
}, 1000);
}, 24000);
setTimeout(function() {
scrollWords[1].style.opacity = 0;
setTimeout(function() {
scrollWords[2].style.opacity = 1;
}, 1000);
}, 30000);
setTimeout(function() {
scrollWords[2].style.opacity = 0;
setTimeout(function() {
scrollWords[3].style.opacity = 1;
}, 1000);
}, 36000);
setTimeout(function() {
scrollWords[3].style.opacity = 0;
setTimeout(function() {
scrollWords[4].style.opacity = 1;
}, 1000);
}, 41000);
setTimeout(function() {
scrollWords[4].style.opacity = 0;
setTimeout(function() {
scrollWords[5].style.opacity = 1;
}, 1000);
}, 46000);
setTimeout(function() {
scrollWords[5].style.opacity = 0;
setTimeout(function() {
lastWord.style.opacity = 1;
}, 1000);
}, 50000);
};
</script>
2条答案
按热度按时间crcmnpdw1#
您没有正确关闭
<span>中的倒数第二个<h2>元素。变化
到
jsfiddle
zfycwa2u2#
您选择最后一个字的方式出错。应该是Span. last word。您感兴趣的是该类的span，而不是该类元素的span schild。
(You在倒数第二个单词元素中也有一个typo - h而不是h2。