Heim >Web-Frontend >CSS-Tutorial >Wie erreicht man den Scrolleffekt von CSS-Text von rechts nach links? (Codebeispiel)
Wie erreicht man den Scrolleffekt von CSS-Text von rechts nach links? (Codebeispiel)
- 藏色散人Original
- 2018-08-13 14:33:1015634Durchsuche
In diesem Artikel wird hauptsächlich erläutert, wie der HTML-Text-Scrolling-Codeeffekt für Webseiten geschrieben wird. Wenn wir die Nachrichtenwiedergabeseite durchsuchen, sehen wir unten immer einen Bildlauf in Echtzeit. Dieser Effekt kann normalerweise durch js oder css erreicht werden. Lassen Sie mich im Folgenden zwei Methoden im Detail vorstellen:
1. Spezifische Beispiele für js-Text-Scrolling-Code:
HTML-Code:
<!DOCTYPE HTML>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<style type="text/css">
</style>
</head>
<body>
<div class="container">
<p class="text">文字从右到左滚动 css文字从右到左滚动 css文字从右到左滚动 css文字从右到左滚动 css文字从右到左滚动 css</p>
</div>
</body>
</html>rrreeDer obige Text scrollen js Kommentare zu relevanten Wissenspunkten im Code:
var Richtung bedeutet 1 bedeutet Eingabe von links, 2 bedeutet Eingabe von rechts
Geschwindigkeit bedeutet, je kleiner der Wert ist, desto schneller die Geschwindigkeit
var textMove, definiert die Anfangsposition des Textes
obj.css() Animation definieren
animate()-Methode zum Ausführen von CSS-Eigenschaften Satz benutzerdefinierter Animationen.
Diese Methode ändert ein Element durch CSS-Stile von einem Zustand in einen anderen. Die Werte der CSS-Eigenschaften ändern sich schrittweise, sodass Sie animierte Effekte erstellen können. Es können nur numerische Werte animiert werden (z. B. „margin:30px“). Zeichenfolgenwerte können nicht animiert werden (z. B. „Hintergrundfarbe: Rot“).
2. CSS-Text-Scrolling-Codebeispiel in div:
<script>
var $container = $('.container'),
$text = $('.text'); var direction = 1,
speed = 3000;
var textMove = function (obj, container, direction, speed) {
var initMarginLeft = '-' + obj.width() + 'px';
obj.css({"margin-left": initMarginLeft});
var move = function () {
var allDistance = obj.width() + container.width(),
remainedDistance = container.width() - parseInt(obj.css('margin-left')),
currentSpeed = (speed * remainedDistance ) / allDistance; // 移动效果
obj.animate({"margin-left": container.width() + 'px'}, currentSpeed, 'linear', function () {
obj.stop(true, true);
obj.css({"margin-left": initMarginLeft});
move();
});
};
move();
container.on("mouseenter", function () {obj.stop(true)})
.on('mouseleave', function () {move()})
};
textMove($text, $container, direction, speed);</script>Hinweise zu verwandten Wissenspunkten:
Sie können Animationen über @keyframes-Regeln erstellen. Das Prinzip besteht darin, schrittweise einen Satz von CSS-Stilen in einen anderen umzuwandeln. Sie können diesen Satz von CSS-Stilen während der Animation mehrmals ändern. Gibt an, wann die Änderung prozentual erfolgt, oder über die Schlüsselwörter „from“ und „to“, die 0 % und 100 % entsprechen. 0 % ist die Startzeit der Animation, 100 % ist die Endzeit der Animation. Für eine optimale Browserunterstützung sollten Sie immer 0 %- und 100 %-Selektoren definieren.
Animationsname Erforderlich. Definiert den Namen der Animation.
keyframes-selector Erforderlich. Der Prozentsatz der Animationsdauer.
Zulässige Werte: 0-100 % von (entspricht 0 %) bis (entspricht 100 %)
css-styles Erforderlich. Eine oder mehrere zulässige CSS-Stileigenschaften.
Das Obige ist eine Einführung in die Methoden des CSS-Bildlaufeffekts, des horizontalen Text-Bildlaufs und des JS-Text-Bildlaufs. Ich hoffe, dass es für Freunde in Not hilfreich sein wird.
[Empfohlene verwandte Artikel]
Beispielcode zum Erstellen von Lauftext in HTML
Eine einfache Methode, um nahtloses Scrollen von Text zu erreichen 10 Zeilen JS
So verwenden Sie Marquee, um das Scrollen von Text nach links und rechts in HTML zu realisieren
JS, um intermittierendes kreisförmiges Scrollen von Text zu realisieren
Das obige ist der detaillierte Inhalt vonWie erreicht man den Scrolleffekt von CSS-Text von rechts nach links? (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!