Wie verwende ich JavaScript, um einen Text-Scroll-Effekt zu erzielen?-js-Tutorial-php.cn

Wie verwende ich JavaScript, um einen Text-Scroll-Effekt zu erzielen?

WBOY

Freigeben： 2023-10-16 08:53:07

Original

1710 Leute haben es durchsucht

如何使用 JavaScript 实现文字滚动效果？

Wie verwende ich JavaScript, um einen Text-Scroll-Effekt zu erzielen?

Der Text-Scroll-Effekt ist ein häufiger dynamischer Effekt auf Webseiten. Durch die scrollende Anzeige von Text kann er die Aufmerksamkeit des Benutzers erregen und die Vitalität der Seite erhöhen. Im Folgenden wird detailliert beschrieben, wie Sie mithilfe von JavaScript einen Text-Scroll-Effekt erzielen, mit angehängten Codebeispielen.

HTML-Struktur erstellen

Erstellen Sie zunächst einen Container auf der HTML-Seite, um den Lauftext einzuschließen. Der Code lautet wie folgt:

<!DOCTYPE html>
<html>
<head>
    <title>文字滚动效果</title>
</head>
<body>
    <div id="scroll-container">
        <div id="scroll-text">这是一段滚动的文字。</div>
    </div>

    <script src="scroll.js"></script>
</body>
</html>

Nach dem Login kopieren

CSS-Stile schreiben

Als nächstes müssen wir dem Container und dem Text Stile hinzufügen, um den Scrolleffekt anzuzeigen. Der Code lautet wie folgt:

#scroll-container {
    overflow: hidden;
    height: 30px;
    width: 200px;
}

#scroll-text {
    white-space: nowrap;
    animation: scroll 5s linear infinite;
}

@keyframes scroll {
    0% {
        transform: translateX(200px);
    }
    100% {
        transform: translateX(-100%);
    }
}

Nach dem Login kopieren

Im obigen Code legen wir eine feste Höhe und Breite für den Container fest und verwenden overflow: versteckt, um den Überlauftext auszublenden. Für das Scrollen von Text verwenden wir white-space: nowrap, um den Textumbruch zu verhindern, und definieren eine Animation namens scroll, um den Scrolleffekt von Text zu erzielen. overflow: hidden 隐藏溢出的文字。对于滚动的文字，我们使用了 white-space: nowrap 禁止文字换行，并定义了一个名为 scroll 的动画，实现文字的滚动效果。

编写 JavaScript 代码

最后，我们需要使用 JavaScript 来动态生成滚动文字。我们使用一个计时器，每隔一段时间改变滚动的文字内容。代码如下：

var scrollText = document.getElementById('scroll-text');
var texts = ['这是一段滚动的文字。', '这是第二段滚动的文字。', '这是第三段滚动的文字。'];
var index = 0;

setInterval(function() {
    scrollText.textContent = texts[index];
    index = (index + 1) % texts.length;
}, 3000);

Nach dem Login kopieren

在上述代码中，我们首先获取滚动文字的元素节点 scrollText，然后定义一个数组 texts

Schließlich müssen wir JavaScript verwenden, um Lauftext dynamisch zu generieren. Wir verwenden einen Timer, um den Lauftextinhalt von Zeit zu Zeit zu ändern. Der Code lautet wie folgt:

scrollText

texts

Das obige ist der detaillierte Inhalt vonWie verwende ich JavaScript, um einen Text-Scroll-Effekt zu erzielen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!