Natives JS realisiert zusammengesetzte Bewegungen verschiedener Bewegungen
|
In diesem Artikel erfahren Sie mehr über eine zusammengesetzte Bewegung, die mit nativem JS implementiert wurde. Die sogenannte zusammengesetzte Bewegung bedeutet, dass sich verschiedene Attribute im gleichen Intervall ändern. Der Effekt ist wie folgt:
Der Implementierungscode lautet wie folgt. Sie können ihn gerne kopieren, einfügen und kommentieren.
<!DOCTYPE html>
<html>
<Kopf>
<meta http-equiv="Inhaltstyp" content="text/html; charset=utf-8" />
<title>Natives JS realisiert zusammengesetzte Bewegungen verschiedener Bewegungen</title>
<Stil>
#div1 {
Breite: 100px;
Höhe: 100px;
Hintergrund: rot;
Deckkraft: 0,3;
}
</Stil>
<Skript>
Funktion getStyle(Objekt, Attribut) {
wenn (obj.aktuellerStil) {
returniere obj.currentStyle[attr];
} anders {
gibt getComputedStyle zurück (Objekt, false) [attr];
}
}
Funktion startMove(obj, json, fn) {
Intervall löschen(Objekt.Timer);
obj.timer = setzeIntervall(Funktion () {
//Schalter einstellen, um zu verhindern, dass sich andere Werte nicht mehr ändern, nachdem ein bestimmter Wert erreicht wurde var bStop = true;
für (var attr in json) {
var iCur = 0;
wenn (attr == 'Deckkraft') {
iCur = parseInt(parseFloat(getStyle(obj, attr)) * 100);
} anders {
iCur = parseInt(getStyle(obj, attr));
};
var iSpeed = (json[attr] – iCur)/8;
iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
//Wenn ein bestimmter Wert nicht erreicht wurde, ist bStop false
wenn (iCur != json[attr]) {
bStop = falsch;
};
wenn (attr == 'Deckkraft') {
obj.style.filter = 'Alpha(Deckkraft:' + (iCur + iSpeed) + ')';
obj.style.opacity = (iCur + iSpeed) / 100;
} anders {
obj.style[attr] = iCur + iSpeed + 'px';
}
}
//Wenn dies in der letzten Schleifenrunde zutrifft, wird der Timer gelöscht if (bStop) {
Intervall löschen(Objekt.Timer);
wenn (fn) {
fn();
}
}
}, 30)
}
</Skript>
<Skript>
fenster.onload = Funktion () {
var oBtn = document.getElementById('btn1');
var oDiv = document.getElementById('div1');
oBtn.onclick = Funktion () {
startMove(oDiv, {
Breite: 400,
Höhe: 200,
Deckkraft: 100
});
};
};
</Skript>
</Kopf>
<body style="Hintergrund:#0F0;">
<input id="btn1" type="button" value="Übung starten" />
<div id="div1"></div>
</body>
</html>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:
|
<<: Detaillierte Schritte zur Installation von MySQL 5.7 über YUM auf CentOS7
>>: Zusammenfassung der Diskussion zur Gültigkeitsdauer von Nginx-Cookies
Artikel empfehlen
Details zur geplanten Datenbanksicherung und Datenwiederherstellung bei Navicat für MySQL
Das Ändern oder Löschen einer Datenbank kann zu D...
Verwenden von Shadowsocks zum Erstellen eines transparenten LAN-Gateways
Inhaltsverzeichnis Installieren und konfigurieren...
Eine kurze Erläuterung der Situationen in MySQL, die zu Indexfehlern führen
Hier einige Tipps von Ausbildungsstätten und mein...
So implementieren Sie Hot Deployment und Hot Start in Eclipse/Tomcat
1. Hot Deployment: Das bedeutet, das gesamte Proj...
Einführung in Javascript DOM, Knoten und Elementerfassung
Inhaltsverzeichnis DOM Knoten Elementknoten: Text...
Automatische Hot-Deployment/Neustart von Jenkins+Tomcat und Lösungen für aufgetretene Probleme (empfohlen)
1. Hintergrund Die Projekte des Unternehmens wurd...
Verwendung des Linux-Befehls gzip
1. Befehlseinführung Der Befehl gzip (GNU zip) wi...
Unterschiede zwischen MySQL MyISAM und InnoDB
Der Unterschied: 1. InnoDB unterstützt Transaktio...
Idea konfiguriert Tomcat zum Starten eines Webprojekts - Grafik-Tutorial
Tomcat konfigurieren 1. Klicken Sie auf „Konfigur...
Detaillierte Erklärung von Group By und Having in MySQL
Mit der GROUP BY-Syntax können die Abfrageergebni...
Detaillierte Erläuterung der Methode zum Vergleichen von Daten in MySQL
Wenn es eine Tabelle mit einem Feld „add_time“ gi...
Element-ui klickt direkt auf die Zelle in der Tabelle, um sie zu bearbeiten
Inhaltsverzeichnis Ergebnisse erzielen Implementi...
So erstellen Sie einen MySQL-Cluster mit hoher Verfügbarkeit und Leistung
Inhaltsverzeichnis Was ist MySQL NDB Cluster? Vor...
So ermitteln Sie die Größe eines Linux-Systemverzeichnisses mit dem Befehl du
Jeder, der das Linux-System verwendet hat, sollte...
So verhindern Sie, dass die Bildlaufleiste die Seitenbreite beeinflusst, wenn die Bildlaufleiste auf der Seite angezeigt wird
Stellen Sie die Breite des Textkörpers auf die Bre...