Question

如何在背景图像上循环显示单词列表。例如，假设短语是“Hello World”，我想在短语悬停时以不同语言循环显示单词“hello”。我该怎么做？

Answer 1

请注意，在不改变“世界”的情况下改变“你好”并没有多大意义，特别是考虑到在某些语言中你可能需要两个以上的单词才能说出“hello world”，而对于一些正确的单词来说序列可能实际上是“世界问候”。

但忽略了这个问题：

var words = ["Hello", "Hi", "Yo", "Aloha", "Bonjour"]
var w = 0
var interval

var container = document.querySelector(".greeting")
var word = container.querySelector("span")

container.addEventListener("mouseover", function() {
  interval = setInterval(function() {
    word.textContent = words[w = (w + 1) % words.length]
  }, 400)
});
container.addEventListener("mouseout", () => clearInterval(interval))

.greeting {
  background-image: url("whatever");
}

<div class="greeting"><span>Hello</span> world</div>

循环通过在翱翔的词与背景

1 个答案: