等级: 已到期
- 注册:
- 2021-10-18
- 曾用名:
|
添加了一个 JavaScript 脚本,用于监听 marquee 的 scroll 事件。当滚动到白色底的图片时,文字颜色会自动变为黑色;当滚动到其他图片时,文字颜色会自动变为白色。同时,我们使用了 CSS 类 .black-text 和 .white-text 来控制字体颜色。此外,我们添加了一个定时器,每100毫秒检查一次字体颜色,以确保在滚动过程中字体颜色能够正确更新白色背景和白色轮动图片时文字没有实现变为黑色,请修正:
<style>
.black-text {
color: black;
}
.white-text {
color: white;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
var marquee = document.querySelector("marquee");
var imgs = marquee.querySelectorAll("img");
var fonts = marquee.querySelectorAll("font");
function updateTextColor() {
var currentImg = imgs[0];
for (var i = 0; i < imgs.length; i++) {
if (imgs[i].offsetTop < marquee.scrollTop + marquee.offsetHeight) {
currentImg = imgs[i];
} else {
break;
}
}
if (currentImg.getAttribute("alt") === "白色底图片") {
fonts.forEach(function(font) {
font.classList.add("black-text");
font.classList.remove("white-text");
});
} else {
fonts.forEach(function(font) {
font.classList.add("white-text");
font.classList.remove("black-text");
});
}
}
marquee.addEventListener("scroll", updateTextColor);
setInterval(updateTextColor, 100);
});
</script>
<marquee direction="up" scrollamount="2" scrolldelay="10" height="200">
<font face="隶书" size="7">并在不断变化的市场环境中持续优化。</font>
<img src="black.jpg" alt="黑色底图片">
<font face="隶书" size="7">这是一段文字,背景是黑色。</font>
<img src="white.jpg" alt="白色底图片">
<font face="隶书" size="7">这是一段文字,背景是白色。</font>
</marquee>
|
|