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
vue + node + socket io realisiert die Interaktion mehrerer Personen und gibt den gesamten Prozess frei
1. Hintergrund 1. Das Frontend verwendet vue + vu...
Eine kurze Diskussion über die drei Hauptprobleme von JS: Asynchronität und Single-Thread
Inhaltsverzeichnis Einzelner Thread asynchron Ein...
So verwenden Sie http und WebSocket in CocosCreator
Inhaltsverzeichnis 1. HttpGET 2. HTTP POST WebSoc...
Was ist COLLATE in MYSQL?
Vorwort Führen Sie den Befehl show create table &...
Detaillierte Erläuterung zum Erstellen eines kontinuierlichen Integrationsclusterdienstes basierend auf Docker-Swarm
Vorwort Dieser Artikel ist lediglich eine einfach...
Zwei Möglichkeiten zur Installation von Python3 auf Linux-Servern
Erste Methode Alibaba Cloud- und Baidu Cloud-Serv...
Teilen Sie einige ungewöhnliche, aber nützliche JS-Techniken
Vorwort Programmiersprachen enthalten normalerwei...
Verwenden Sie CSS, um ein dreispaltiges adaptives Layout zu erreichen (feste Breite auf beiden Seiten, adaptiv in der Mitte)
Das sogenannte dreispaltige adaptive Layout bedeu...
Detaillierte Erläuterung der Anwendungsbereitstellungspraxis für Docker + Jenkins + Gitlab + Django
1. Hintergrund Im Kontext schneller Updates und I...
MySql-Batch-Insert-Optimierung. Beispiel für SQL-Ausführungseffizienz. Detaillierte Erklärung
MySql-Batch-Insert-Optimierung. Beispiel für SQL-...
MySQL-Serie Multi-Table Join Abfrage 92 und 99 Syntaxbeispiele ausführliches Tutorial
Inhaltsverzeichnis 1. Kartesisches Produktphänome...
Vollständige Schritte zum Bereitstellen einer Front-End- und Back-End-getrennten Nginx-Konfiguration
Vorwort Es ist ein Klischee. Hier werde ich über ...
Das WeChat-Applet implementiert einen Countdown zum Senden des SMS-Bestätigungscodes
In diesem Artikel finden Sie den spezifischen Cod...
Detaillierte Erklärung der Listendarstellung von Vue
Inhaltsverzeichnis 1. v-for: Array-Inhalte durchl...
Eine kurze Analyse der zugrunde liegenden Prinzipien von MySQL-Transaktionen und Isolationsebenen
Inhaltsverzeichnis Vorwort 1. Kurze Analyse der z...