JS implementiert Click-Drop-Effekt
|
js realisiert den Spezialeffekt des Klickens und Ablegens. Schauen wir uns zunächst das Effektbild an
Lassen Sie uns ohne weitere Umschweife loslegen.
<!DOCTYPE HTML>
<html>
<Kopf>
<meta http-equiv="Inhaltstyp" content="text/html; charset=utf-8">
<title>Unbenanntes Dokument</title>
<script src="jquery.js"></script>
<Skript>
fenster.onload = Funktion () {
var str = '';
var Länge = 20;
var aDiv = document.getElementsByTagName('div');
var Timer = null;
varnum = 0;
für (var i=0; i<len; i++) {
str += '<div style="width:50px; height:50px; background:red; position:absolute; top:0px; left:'+ i*60 +'px;"></div>';
}
Dokument.Body.innerHTML = str;
dokument.onclick = Funktion () {
clearInterval(Zeitgeber);
Timer = setzeIntervall( Funktion () {
DM(aDiv[num], 'oben', 23, 500);
Zahl++;
wenn (Zahl === Länge) {
clearInterval(Zeitgeber);
}
}, 100 );
};
};
</Skript>
</Kopf>
<Text>
</body>
</html>Ich habe die Kapselungsmethode hier zitiert
Funktion DM( Objekt, Attribut, Richtung, Ziel, EndeFunktion ) {
dir = parseInt(getStyle( obj, attr )) < Ziel ? dir : -dir;
: Löschintervall(obj.timer);
obj.timer = setzeIntervall(Funktion () {
var speed = parseInt(getStyle( obj, attr )) + dir; // Schrittlänge
wenn (Geschwindigkeit > Ziel && Richtung > 0 || Geschwindigkeit < Ziel && Richtung < 0) {
Geschwindigkeit = Ziel;
}
obj.style[attr] = Geschwindigkeit + 'px';
wenn (Geschwindigkeit == Ziel) {
: Löschintervall(obj.timer);
/*
wenn ( endFn ) {
endFn();
}
*/
endFn und endFn();
}
}, 30);
}Dies ist das Ende dieses Artikels über die Implementierung von Click-and-Drop-Effekten mit JS. Weitere relevante JS-Click-and-Drop-Inhalte finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen! Das könnte Sie auch interessieren:
|
<<: So implementieren Sie den Selbststart eines Docker-Containers
>>: Lösung für den Fehler beim Starten von MySQL aufgrund unzureichenden Speicherplatzes in Ubuntu
Artikel empfehlen
Analyse allgemeiner Grundvorgänge der MySQL-Datenbank [Datenbank erstellen, anzeigen, ändern und löschen]
In diesem Artikel werden anhand von Beispielen di...
Zusammenfassung der Methoden zum Erstellen, Auflisten und Löschen von Docker-Containern unter Linux
1. Starten Sie den Docker-Container Starten Sie m...
Beispielcode zur Implementierung mobiler Expansions- und Collapse-Effekte mit reinem CSS3
Dieser Artikel stellt den Beispielcode zur Implem...
Der komplette Prozess der iptables-Regeln in Docker geht nach dem Neustart von iptables verloren
Ursachen und Folgen 1. Wenn Sie den Ansible-Befeh...
Eine Methode zum Erstellen von Karussellbildern mit CSS3
Diashows sieht man häufig auf Webseiten. Sie enth...
Docker-Tutorial: Container verwenden (einfaches Beispiel)
Wenn Sie mit Docker noch nicht vertraut sind, seh...
Detaillierte Erklärung des TS-Objekt-Spread-Operators und des Rest-Operators
Inhaltsverzeichnis Überblick Objektrestattribut E...
So verwenden Sie Cursor-Trigger in MySQL
Cursor Die von der Auswahlabfrage zurückgegebenen...
Beispiele für zwei Möglichkeiten zur Implementierung einer horizontalen Bildlaufleiste
Vorwort: Während der Projektentwicklung stießen w...
Klassifizierung der Farbeigenschaften von Webseiten
Klassifizierung der Farbeigenschaften Jede Farbe ...
Erläuterung der Docker Compose-Netzwerkeinstellungen
Grundlegende Konzepte Standardmäßig erstellt Comp...
Fügen Sie Linux eine Startmethode hinzu (Dienst/Skript)
Konfigurationsdatei, die beim Systemstart geladen...
Implementierungsschritte zur Kapselung von Komponenten basierend auf React
Inhaltsverzeichnis Vorwort Wie kapselt Antd Kompo...
Analyse der Prinzipien und Verwendung von Linux-Hardlinks und Softlinks
Im Linux-System gibt es einen Dateityp namens Lin...
Eine kurze Analyse des Unterschieds zwischen statisch und selbst in PHP-Klassen
Verwenden Sie self:: oder __CLASS__, um eine stat...