JavaScript, um einen einheitlichen Animationseffekt zu erzielen
|
In diesem Artikelbeispiel wird der spezifische Code zur Implementierung einer Animation mit gleichmäßiger Geschwindigkeit in JavaScript zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt Umsetzungsideen: 1. Verwenden Sie hauptsächlich die Timing-Funktion setInterval (), um Animationseffekte zu erzielen Tipp: Das Obige ist nur eine Methode. Je nach Bedarf können verschiedene Animationseffekte angepasst werden. Codebeispiel:
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta http-equiv="X-UA-kompatibel" content="IE=edge">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<title>Einheitliche Animation</title>
<Stil>
.Kasten {
Position: relativ;
Breite: 1000px;
Rand oben: 20px;
}
.xiaohuli {
Position: absolut;
oben: 0;
links: 0;
Breite: 150px;
Höhe: 150px;
}
.pikaqiu {
Position: absolut;
oben: 150px;
links: 0;
Breite: 200px;
Höhe: 150px;
}
</Stil>
</Kopf>
<Text>
<button class="btn1">Klicken Sie, um den kleinen Fuchs zu bewegen</button>
<button class="btn2">Klicken, um Pikachu zu bewegen</button>
<div Klasse="Box">
<img src="images/kleiner Fuchs.jpg" alt="" class="xiaohuli">
<img src="images/Pikachu.jpg" alt="" class="pikaqiu">
</div>
<Skript>
var btn1 = document.querySelector('.btn1');
var btn2 = document.querySelector('.btn2');
var xiaohuli = document.querySelector('.xiaohuli');
var pikaqiu = document.querySelector('.pikaqiu');
btn1.addEventListener('klicken', function() {
beleben (Xiaohuli, 300);
})
btn2.addEventListener('klicken', function() {
beleben (Pikaqiu, 450);
})
// Animationsfunktion obj Animationsobjekt, Ziel Ziel linker Offset, Rückruf Rückruffunktion Funktion animieren(obj, Ziel, Rückruf) {
Intervall löschen(Objekt.Timer);
obj.timer = setzeIntervall(Funktion() {
obj.style.left = obj.offsetLeft + 5 + 'px';
wenn (Objekt.OffsetLeft >= Ziel) {
// Animation stoppen clearInterval(obj.timer);
// Wenn eine Rückruffunktion vorhanden ist, führen Sie die Rückruffunktion aus, wenn (Rückruf) {
Rückruf();
}
}
}, 30);
}
</Skript>
</body>
</html>Seiteneffekt:
Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird. Das könnte Sie auch interessieren:
|
<<: Verwendung von MySQL DDL-Anweisungen
>>: Erstellen und Verwenden von Docker-Datenvolumencontainern
Artikel empfehlen
Analyse von 2 Implementierungsmethoden zum Konfigurieren der JNID-Datenquelle in Tomcatc3p0
Verwenden von c3p0 Importieren Sie das c3p0jar-Pa...
Eine kurze Analyse der MySQL-Kardinalitätsstatistiken
1. Was ist die Kardinalität? Mit Kardinalität wir...
Implementierung einer kreisförmigen CSS-Aushöhlung (Gutschein-Hintergrundbild)
In diesem Artikel werden hauptsächlich kreisförmi...
IE6 implementiert min-width
Zunächst einmal wissen wir, dass dieser Effekt ei...
Optimierte Implementierung von count() für große MySQL-Tabellen
Das Folgende ist mein Urteil basierend auf der Da...
jQuery-Plugin zur Implementierung des Dashboards
Das jQuery-Plug-In implementiert das Dashboard zu...
Website-Erstellungs-Tutorial für Anfänger: Lernen Sie, in zehn Tagen eine Website zu erstellen
Das 10-tägige Tutorial verwendet eine äußerst ver...
Eine kurze Diskussion zum Problem, dass der Text in der Schaltfläche im Kompatibilitätsmodus des Browsers nicht vertikal zentriert ist
XML/HTML-CodeInhalt in die Zwischenablage kopiere...
Deaktivierte Werte, die nicht eingegeben werden können, können nicht an die Aktionsebene übergeben werden
Wenn ich das Formular eingabeunfähig machen möchte...
Die perfekte Lösung für die Installation von MYSQL5.7.24 ohne Datenverzeichnis und my-default.ini und Dienststartfehler
Downloadadresse der offiziellen MySQL-Website: ht...
Vue imitiert den Formularbeispielcode von ElementUI
Implementierungsanforderungen Das ElementUI imiti...
Detaillierte Erläuterung des Problems der Übereinstimmung, selbst wenn in der MySQL-Abfragebedingung am Ende der Zeichenfolge ein Leerzeichen steht
1. Tabellenstruktur TABELLE person Ausweis Name 1...
Detaillierte Erläuterung der Verwendung der integrierten Funktion „locate instr position find_in_set“ in der effizienten Fuzzy-Suche von MySQL
Es gibt die folgenden vier häufig verwendeten Met...
Eine vorläufige Studie zu zusammengesetzten Primärschlüsseln und gemeinsamen Primärschlüsseln in SQL-Anweisungen
1. Zusammengesetzter Primärschlüssel Der sogenann...
Eine kurze Beschreibung der Beziehung zwischen k8s und Docker
In letzter Zeit verwendet das Projekt Kubernetes ...