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
![Beispielanalyse von Linux-Benutzer- und Gruppenbefehlen [Wechseln, Hinzufügen von Benutzern, Berechtigungskontrolle usw.]](/upload/images/67cad980eef6b.webp)
Artikel empfehlen
js canvas implementiert den Bestätigungscode und erhält die Bestätigungscodefunktion
In diesem Artikelbeispiel wird der spezifische Co...
Ein vollständiges Tutorial zur Verwendung der Axios-Kapselung in Vue
Vorwort Heutzutage wird in Projekten häufig die A...
3 Methoden zum Wiederherstellen der Tabellenstruktur aus einer FRM-Datei in MySQL [empfohlen]
Wenn MySQL normal ausgeführt wird, ist es nicht s...
MySQL ermöglicht langsame Abfragen (Einführung in die Verwendung der EXPLAIN-SQL-Anweisung)
Heutzutage werden Datenbankoperationen immer häuf...
3 Möglichkeiten zum Hinzufügen von Links zu HTML-Auswahl-Tags
Der Erste : Code kopieren Der Code lautet wie folg...
Gründe und Lösungen für langsame MySQL-Abfragen, die beim Senden von Daten hängen bleiben
Weil ich ein Python-Programm geschrieben und inte...
Detaillierte Erklärung des this-Zeigeproblems in JavaScript
Zusammenfassen Globale Umgebung ➡️ Fenster Normal...
Der Datenordner konnte während der Installation von mysql8.0.14.zip nicht automatisch erstellt werden. Der Dienst kann nicht gestartet werden.
Nachdem ich das System heute neu installiert hatt...
Bringen Sie Ihnen bei, wie Sie einen Tencent Cloud Server erstellen (grafisches Tutorial)
Dieser Artikel wurde ursprünglich von Bloggerin W...
Lernprogramm zur Verwendung des WeChat-Applets WXS
Was ist wxs? wxs (WeiXin Script) ist eine Skripts...
Docker-Bereitstellung – Analyse des Implementierungsprozesses für RabbitMQ-Container
1. Ziehen Sie das Bild Führen Sie zunächst den fo...
Ein tiefes Verständnis der spitzen Klammern in Bash (für Anfänger)
Vorwort Bash verfügt über viele wichtige integrie...
So implementieren Sie eine bidirektionale Bindungsfunktion in vue.js mit reinem JS
Inhaltsverzeichnis Lassen Sie uns zunächst über d...
Docker-Grundlagen-Tutorial: Detaillierte Erklärung der Dockerfile-Syntax
Vorwort Dockerfile ist ein vom Docker-Programm in...
Eine kurze Analyse, ob der MySQL-Primärschlüssel Zahlen oder UUIDs für schnellere Abfragen verwendet
Bei der tatsächlichen Entwicklung kann der Primär...