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
50 Codezeilen zur Implementierung von Nutzungsstatistiken für Webpack-Komponenten
Hintergrund Kürzlich wollte ein Leiter, dass wir ...
Zusammenfassung der Wissenspunkte zu den grundlegenden Attributen von Linux-Dateien
Das Linux-System ist ein typisches Mehrbenutzersy...
Implementierung der Knotenverbindung zur MySQL-Abfragetransaktionsverarbeitung
Inhaltsverzeichnis Geben Sie das Thema MySQL ein:...
Beispieloperation MySQL Kurzlink
So richten Sie einen MySQL-Kurzlink ein 1. Überpr...
Detaillierte Erläuterung der Idee des MySQL-Triggers zur Echtzeiterkennung einer Anweisung zum Sichern und Löschen
Problembeschreibung: Der Benutzer hat die Anforde...
jQuery realisiert den Effekt der Sitzplatzauswahl und -reservierung im Theater
jQuery realisiert den Effekt der Sitzplatzauswahl...
Vue realisiert einfachen Effekt des Lauflichts
In diesem Artikel wird der spezifische Code von V...
Grafisches Tutorial zur Installation und Konfiguration komprimierter Pakete für MySQL 5.7.24
In diesem Artikel finden Sie das Installations-Tu...
Hostübergreifende Kommunikation zwischen Docker-Containern - Overlay-basierte Implementierungsmethode
Overlay-Netzwerkanalyse Die integrierte netzwerkü...
3 Tipps, die Sie beim Erlernen von JavaScript kennen müssen
Inhaltsverzeichnis 1. Der magische Erweiterungsop...
Grundlegende Verwendung des Befehls wget unter Linux
Inhaltsverzeichnis Vorwort 1. Laden Sie eine einz...
So lösen Sie das Problem, dass das Kennwort nach dem Dekomprimieren der kostenlosen MySQL-Installationsversion nicht gefunden wird
1. Entpacken Sie mysql-8.0.21-winx64 2. Konfiguri...
Detaillierte Erläuterung der Fallstricke bei der Konfiguration von Apache-Domänennamen
Ich habe Apache nie verwendet. Nachdem ich angefa...
MySQL-Datenbank muss SQL-Anweisungen kennen (erweiterte Version)
Dies ist eine erweiterte Version. Die Fragen und ...
Analyse von Beispielen für MySQL-Benutzerverwaltungsvorgänge
Dieser Artikel beschreibt die MySQL-Benutzerverwa...