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
80 Zeilen Code zum Schreiben eines Webpack-Plugins und Veröffentlichen auf npm
1. Einleitung Ich habe vor Kurzem die Prinzipien ...
Der Unterschied und die Verwendung von Datum/Uhrzeit und Zeitstempel in MySQL
1. Wie wird die aktuelle Uhrzeit in MySQL dargest...
Grafisches Tutorial zur Installation von JDK1.8 unter CentOS7.4
Schritte zur Linux-Installation von JDK1.8 1. Übe...
jQuery-Plugin zum Erzielen eines Karusselleffekts
Jeden Tag ein jQuery-Plugin - jQuery-Plugin zur I...
Eine detaillierte Einführung in die Speicherverwaltung und -adressierung unter Linux
Inhaltsverzeichnis 1. Konzept Speicherverwaltungs...
Detailliertes Beispiel für MySQL ähnlich dem Schreiben von Oracle Rownum
Rownum ist eine einzigartige Schreibmethode in Or...
So implementieren Sie den neuen Operator von JavaScript selbst
Inhaltsverzeichnis Konstruktor neuer Operator Imp...
Detaillierte Erklärung zum Ändern des Standardstils der externen Komponente Vant basierend auf der Vue-CLI-Entwicklung
Inhaltsverzeichnis Vorwort 1. Weniger 2. Importie...
Detaillierte Erläuterung der MySQL-Optimierung für Schreibprobleme im großen Maßstab
Zusammenfassung: Wenn über die Leistungsoptimieru...
So verwenden Sie Docker Compose zum Implementieren des Nginx-Lastausgleichs
Implementieren Sie den Nginx-Lastausgleich basier...
Eine kurze Diskussion über die Anpassung mobiler Endgeräte
Vorwort Beim Schreiben von Front-End-Code kommt m...
So beheben Sie den Fehler „MySQL-Dienst kann nicht gestartet werden, Fehler 1069“
Heute, als ich unterwegs war, schrieb mir ein Kol...
So legen Sie das Breitenattribut auf den Stil des Span-Tags fest
Wenn Sie das Breitenattribut direkt auf den Stil d...
Detaillierte Erläuterung mehrerer Lösungen für JavaScript-Unterbrechungsanforderungen
Inhaltsverzeichnis 1 Versprechen Unterbrechen Sie...
So fügen Sie in MySQL 8.0 schnell Spalten hinzu
Vorwort: Ich habe vor langer Zeit gehört, dass My...