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
Tutorial zum Erstellen einer Windows Server 2019 IIS10.0+PHP(FastCGI)+MySQL-Umgebung
Vorbereitung 1. Umgebungsbeschreibung: Betriebssy...
Vue und React im Detail
Inhaltsverzeichnis 1. Panorama II. Hintergrund 1....
PageSpeed Optimierung im Überblick
Ich glaube, dass das Internet zu einem immer unve...
Vue implementiert einen Countdown zwischen angegebenen Daten
In diesem Artikelbeispiel wird der spezifische Co...
Mysql-Datenbankdesign - Analyse von drei Paradigmenbeispielen
Drei Paradigmen 1NF: Felder sind untrennbar; 2NF:...
Detaillierte Erklärung des Unterschieds zwischen run/cmd/entrypoint in Docker
In Dockerfile können run, cmd und entrypoint zum ...
4 Lösungen für CSS-Browserkompatibilitätsprobleme
Frontend ist ein harter Job, nicht nur weil sich ...
Analysieren Sie die Prinzipien und Methoden der MySQL-Replikation und -Optimierung
1. Einleitung MySQL verfügt über eine Replikation...
CentOS6.8 verwendet cmake zur Installation von MySQL5.7.18
Unter Bezugnahme auf die Online-Informationen hab...
Tiefgreifendes Verständnis der Probleme mit der Transaktionsisolationsebene und dem Sperrmechanismus von MySQL
Überblick Datenbanken führen im Allgemeinen mehre...
Das WeChat-Applet implementiert das Schlangenspiel
In diesem Artikel wird der spezifische Code des W...
Installation und Verwendung des Linux-Betriebs- und Wartungstools Supervisor (Prozessmanagement-Tool)
1. Einleitung Supervisor ist ein in Python entwic...
Entwerfen Sie eine einfache HTML-Anmeldeoberfläche im CSS-Stil
login.html-Teil: <!DOCTYPE html> <html l...
Verwenden Sie reines CSS, um das A-Tag in HTML ohne JavaScript zu deaktivieren
Tatsächlich ist dieses Problem bereits aufgetreten...
So verwenden Sie den Flat Style zum Gestalten von Websites
Das Wesen einer flachen Website-Struktur liegt in...