So verwenden Sie JavaScript, um den Links- und Rechts-Scroll-Effekt von Schriftarten zu erzielen

Mit der kontinuierlichen Entwicklung der Gesellschaft wird die Front-End-Entwicklungstechnologie immer ausgereifter. Unter ihnen verfügt JavaScript als eine der wichtigsten Web-Front-End-Entwicklungssprachen über eine umfassende Skalierbarkeit und Bedienbarkeit. In der tatsächlichen Entwicklung können wir JavaScript verwenden, um verschiedene dynamische Effekte zu erzielen, z. B. den Scrolleffekt von Schriftarten nach links und rechts. In diesem Artikel wird detailliert beschrieben, wie Sie mithilfe von JavaScript den linken und rechten Bildlaufeffekt von Schriftarten erzielen.

1. HTML-Struktur

Zuerst müssen wir einen Container in HTML erstellen, um die Schriftart anzuzeigen, die wir scrollen möchten. Die HTML-Struktur ist wie folgt:

<div id="scrollBox">
  <span id="scrollText">这是一段要滚动的文本This is a roll text.</span>
</div>

In dieser Struktur verwenden wir zwei Elemente: div Container und span Text. Unter diesen wird der div-Container verwendet, um den Bildlaufbereich des Texts einzuschränken, und der span-Text ist der Textinhalt, der gescrollt werden soll. div容器和span文本。其中，div容器用于限定文本的滚动范围，span文本则是要进行滚动的文本内容。

二、CSS样式

接下来，我们需要使用CSS样式来对上述html结构进行修饰，使其具有滚动效果。CSS样式如下：

#scrollBox {
  width: 200px; /* 容器宽度 */
  height: 30px; /* 容器高度 */
  overflow: hidden; /* 隐藏超出容器部分的内容 */
  border: 1px solid #ddd; /* 容器边框 */
}
#scrollText {
  display: inline-block; /* 文本块级元素转为内联块级 */
  white-space: nowrap; /* 不允许文本换行 */
  font-size: 16px; /* 字体大小 */
  color: #333; /* 字体颜色 */
  margin-right: 20px; /* 右侧空隙，用于控制滚动速度 */
  animation: textScroll 10s linear infinite; /* 文本滚动动画 */
}
@keyframes textScroll {
  0% { transform: translateX(0); } /* 初始状态 */
  100% { transform: translateX(-100%); } /* 最终状态 */
}

我们使用了overflow: hidden属性来隐藏超出容器范围的内容，如此一来，我们就可以将要滚动的文本内容全部放到容器中。同时，我们使用white-space: nowrap属性来防止文本内容发生换行。margin-right属性用于控制滚动速度，数值越大滚动越慢，反之亦然。

最关键的是，我们使用了CSS3中的animation属性来设置文本滚动动画。@keyframes关键字用来声明动画的关键帧，即滚动效果的始末状态。我们在textScroll动画中，设置了初始状态为0%，最终状态为-100%，即文本滚出容器。

三、JavaScript交互

通过以上CSS样式设置，我们已经完成了滚动效果的布局，但实际上，滚动效果是属于浏览器的渲染效果，并非JavaScript直接实现。为了控制这个滚动效果，我们还需要一定程度的JavaScript交互。接下来，我们将通过JavaScript来实现文本滚动的启停。

var textEle = document.getElementById('scrollText'); // 获取文本元素
var textAnimation = textEle.style.animation; // 获取文本动画
textEle.style.animation = 'none'; // 停止文本滚动
window.setTimeout(function() {
  textEle.style.animation = textAnimation; // 恢复文本滚动
}, 0);

我们使用document.getElementById方法来获取要进行滚动的文本元素，通过获取文本元素的animation属性来获取文本动画。然后，通过设置该元素的animation属性为none，即可停止文本滚动效果。最后，我们使用setTimeout方法来异步执行恢复文本滚动，即复原初始的animation

2. CSS-Stil

Als nächstes müssen wir den CSS-Stil verwenden, um die obige HTML-Struktur zu ändern, um ihr einen Scroll-Effekt zu verleihen. Der CSS-Stil ist wie folgt:

rrreee

Wir verwenden das Attribut overflow:hidden, um Inhalte außerhalb des Containerbereichs auszublenden. Auf diese Weise können wir den gesamten zu scrollenden Textinhalt in den einfügen Container. Gleichzeitig verwenden wir das Attribut white-space: nowrap, um zu verhindern, dass der Textinhalt umbrochen wird. Das Attribut margin-right wird verwendet, um die Scrollgeschwindigkeit zu steuern. Je größer der Wert, desto langsamer das Scrollen und umgekehrt.

Das Wichtigste ist, dass wir das Attribut animation in CSS3 verwenden, um die Textlaufanimation festzulegen. Das Schlüsselwort @keyframes wird verwendet, um die Schlüsselbilder der Animation zu deklarieren, also den Anfang und das Ende des Bildlaufeffekts. In der textScroll-Animation setzen wir den Anfangszustand auf 0 % und den Endzustand auf -100 %, d. h. der Text wird ausgerollt des Behälters. 🎜🎜3. JavaScript-Interaktion🎜🎜Durch die oben genannten CSS-Stileinstellungen haben wir das Layout des Scroll-Effekts abgeschlossen, aber tatsächlich ist der Scroll-Effekt ein Rendering-Effekt des Browsers und wird nicht direkt von JavaScript implementiert. Um diesen Scrolleffekt zu steuern, benötigen wir auch ein gewisses Maß an JavaScript-Interaktion. Als Nächstes verwenden wir JavaScript, um das Scrollen des Textes zu starten und zu stoppen. 🎜rrreee🎜Wir verwenden die Methode document.getElementById, um das zu scrollende Textelement abzurufen, und erhalten die Textanimation, indem wir das Attribut animation des Textelements abrufen. Anschließend können Sie den Text-Scroll-Effekt stoppen, indem Sie das Attribut animation des Elements auf none setzen. Schließlich verwenden wir die Methode setTimeout, um das Scrollen des Texts asynchron wiederherzustellen, d. h. die anfänglichen Einstellungen für die Animation wiederherzustellen. 🎜🎜Durch die obige JavaScript-Interaktion haben wir die Implementierung des Text-Scroll-Effekts abgeschlossen. 🎜🎜4. Zusammenfassung🎜🎜Bisher haben wir die JavaScript-Methode erfolgreich implementiert, um den linken und rechten Scrolleffekt von Schriftarten zu erzielen. Der Bildlaufeffekt von Text kann über CSS-Stile eingestellt werden, und der Start und Stopp des Textlaufs kann über JavaScript-Interaktion gesteuert werden, was einen gewissen praktischen Nutzen und Referenzwert hat. Ich hoffe, dass dieser Artikel für Entwickler hilfreich sein kann, die neu bei JavaScript sind und weiterhin das Wachstum der Front-End-Entwicklungstechnologie unterstützen. 🎜

Das obige ist der detaillierte Inhalt vonSo verwenden Sie JavaScript, um den Links- und Rechts-Scroll-Effekt von Schriftarten zu erzielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!