jQuery implementiert die Funktion zum Ziehen von Bildern mit der Maus
|
In diesem Beispiel wird jQuery verwendet, um eine Bildfunktion zum Ziehen mit der Maus zu implementieren. Richten Sie zunächst einen Wrapper ein. Die Koordinaten im Wrapper sind die Koordinaten der Bildbewegung.
#Verpackung{
Breite: 1000px;
Höhe: 1000px;
Position: relativ;
}Legen Sie das Bild-Div fest, das gezogen werden soll
#div1{
Position: absolut;
links: 0px;
oben: 0px;
Breite: 300px;
Höhe: 200px;
Hintergrund: url("d:/Bilder/Erde.jpg");
Hintergrundgröße: enthalten;
}Das Obige setzt die Positionierung des Wrappers auf relativ und die von div1 auf absolut. Als nächstes entwerfen Sie den Ziehalgorithmus: Die Idee ist folgende: 1. Lassen Sie das Div der Maus folgen, wenn mit der Maus geklickt wird 2. Hören Sie auf zu folgen, wenn die Maus losgelassen wird Zuerst benötigen wir eine Funktion, die die Koordinaten des Div auf die aktuelle Mausposition ändert: Zunächst müssen Sie mehrere Variablen definieren, um die aktuellen Mauskoordinaten und die Bildkoordinaten zu speichern.
var Zeitgeber;
var MausX = 0;
var MausY = 0;
var pic_width = parseInt($("#div1").css("Breite"));
var pic_height = parseInt($("#div1").css("Höhe"));Jetzt müssen wir dem Wrapper einen Ereignislistener hinzufügen. Wenn sich die Maus im Wrapper bewegt, ändern wir die Werte der Variablen mousex und mousey.
$("#wrapper").mousemove(Funktion(e){
MausX = e.ClientX;
MausY = e.ClientY;
});Schreiben Sie eine Follow-Funktion und rufen Sie sie mit einem Timer auf
$("#div1").mousedown(Funktion(){
Timer=Intervall einstellen(folgen,10);
});
$("#div1").mouseup(Funktion(){
Intervall löschen(Timer);
});
var folgen = Funktion(){
$("#div1").css("links",mouseX-pic_width/2);
$("#div1").css("oben",mouseY-pic_height/2);
};Der vollständige Code lautet wie folgt:
<!doctype html>
<html>
<Kopf>
<Skripttyp = "Text/Javascript" src = "jquery.js"></Skript>
<Stiltyp = "Text/CSS">
#Verpackung{
Breite: 1000px;
Höhe: 1000px;
Position: relativ;
Hintergrund: linearer Farbverlauf (hellblau, weiß);
Schriftgröße: 40px;
}
#div1{
Position: absolut;
links: 0px;
oben: 0px;
Breite: 300px;
Höhe: 200px;
Hintergrund: url("d:/Bilder/Erde.jpg");
Hintergrundgröße: enthalten;
}
</Stil>
</Kopf>
<Text>
<div id = "Wrapper">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Impedit numquam accusamus explicabo praesentium laudantium et accusantium, ab ipsum, excepturi necessitatibus quos iste ad qui deleniti sed debitis reiciendis quam nisi.
<div-ID = "div1">
</div>
</div>
<Skript>
var Zeitgeber;
var MausX = 0;
var MausY = 0;
var pic_width = parseInt($("#div1").css("Breite"));
var pic_height = parseInt($("#div1").css("Höhe"));
$("#wrapper").mousemove(Funktion(e){
MausX = e.ClientX;
MausY = e.ClientY;
});
$("#div1").mousedown(Funktion(){
Timer=Intervall einstellen(folgen,10);
});
$("#div1").mouseup(Funktion(){
Intervall löschen(Timer);
});
var folgen = Funktion(){
$("#div1").css("links",mouseX-pic_width/2);
$("#div1").css("oben",mouseY-pic_height/2);
};
</Skript>
</body>
</html>Endergebnis:
Dies ist das Ende dieses Artikels über die Verwendung von jQuery zum Ziehen von Bildern mit der Maus. Weitere Informationen zur Verwendung von jQuery zum Ziehen von Bildern mit der Maus 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:
|
<<: Mehrere gängige Möglichkeiten zum Bereitstellen von Tomcat-Projekten [getestet]
>>: Tiefgreifendes Verständnis der MySQL-Selbstverbindung und Join-Assoziation
Artikel empfehlen
So übertragen Sie Dateien zwischen Windows und Linux
Dateiübertragung zwischen Windows und Linux (1) V...
Erweiterte Erklärung der Javascript-Funktionen
Inhaltsverzeichnis Funktionsdefinitionsmethode Fu...
Implementierung des HTML-Gleit- und Schwebeball-Menüeffekts
CSS-Stile html,Text{ Breite: 100 %; Höhe: 100%; R...
So implementieren Sie den neuen Operator von JavaScript selbst
Inhaltsverzeichnis Konstruktor neuer Operator Imp...
Detaillierte Erklärung der vier Arten von MySQL-Verbindungen und Multi-Table-Abfragen
Inhaltsverzeichnis MySQL Inner Join, Left Join, R...
Beispiel für handschriftliches Vue2.0-Daten-Hijacking
Inhaltsverzeichnis 1: Webpack erstellen 2. Datend...
So installieren Sie Oracle Java 14 auf Ubuntu Linux
Vor Kurzem hat Oracle die öffentliche Verfügbarke...
HTML-Tabellen-Tag-Tutorial (45): Tabellen-Body-Tag
Mit dem Tag <tbody> wird der Stil des Tabel...
Standardmäßige Stilanordnung für HTML-Tags
html, address,blockquote,body, dd, div,dl, dt, fie...
nginx generiert automatisch Konfigurationsdateien im Docker-Container
Wenn ein Unternehmen eine automatisierte Docker-B...
Implementierung der Bereitstellung des Apollo-Konfigurationscenters mithilfe von Docker in CentOS7
Apollo Open Source-Adresse: https://github.com/ct...
HTML-Tutorial: Sammlung häufig verwendeter HTML-Tags (5)
Diese eingeführten HTML-Tags entsprechen nicht un...
Führen Sie die Schritte aus, um schnell ein Vue3.0-Projekt zu erstellen
Inhaltsverzeichnis 1. Wir müssen sicherstellen, d...
Zusammenfassung relevanter Erkenntnisse zur Umsetzung adaptiven Webdesigns
Wie funktioniert „Adaptives Webdesign“? Eigentlich...
Implementierung der HTML-Befehlszeilenschnittstelle
HTML-Teil Code kopieren Der Code lautet wie folgt:...