jQuery-Plugin zum Erreichen eines Bildvergleichs
|
In diesem Artikelbeispiel wird der spezifische Code des jQuery-Plug-Ins zum Erzielen eines Bildvergleichs zu Ihrer Information geteilt. Der spezifische Inhalt ist wie folgt Ein sehr häufiger Effekt, der nicht schwer zu erzielen ist Die Wirkung ist wie folgt
Codeabschnitt
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="utf-8">
<title>Bilder vergleichen</title>
<script src="js/jquery-3.4.1.min.js"></script>
<Stil>
*{
Rand: 0px;
Polsterung: 0px;
Benutzerauswahl: keine;
}
.div{
Rand: 1px durchgehend hellgrau;
Breite: 400px;
Höhe: 200px;
Rand: 10px;
schweben: links;
Position: relativ;
}
.img1{
Position: absolut;
oben: 0;
unten: 0;
links: 0;
Breite: 50%;
}
.img2{
Position: absolut;
oben: 0;
unten: 0;
links: 50%;
rechts: 0;
}
.img1,.img2{
Hintergrundposition: Mitte Mitte;
Hintergrundgröße: 400px 200px;
Hintergrundwiederholung: keine Wiederholung;
}
.img1{
Hintergrundposition-x: 0;
}
.img2{
Hintergrundposition-x: 100 %;
Filter: invertieren (100 %);
}
.Bar{
Position: absolut;
oben: 0;
unten: 0;
rechts: -4px;
Breite: 8px;
Hintergrundfarbe: grau;
Cursor:ew-Größe ändern;
Deckkraft: 0,2;
}
.stoppen{
Zeigerereignisse: keine;
}
</Stil>
</Kopf>
<Text>
<div Klasse="div">
<div Klasse="img1" Stil="Hintergrundbild: URL(img/1.jpg);">
<div Klasse="bar" Datenflag="0"></div>
</div>
<div Klasse="img2" Stil="Hintergrundbild: URL(img/1.jpg);"></div>
</div>
<div Klasse="div">
<div Klasse="img1" Stil="Hintergrundbild: URL(img/2.jpg);">
<div Klasse="bar" Datenflag="0"></div>
</div>
<div Klasse="img2" Stil="Hintergrundbild: URL(img/2.jpg);"></div>
</div>
</body>
</html>
<Skript>
$(Dokument).bereit(Funktion(){
$(".bar").mousedown(Funktion(){
$(this).parent().addClass("stoppen");
$(this).parent().next().addClass("stoppen");
$(this).attr("Datenflag","1")
})
$(".div").mousemove(Funktion(e){
var temp = $(this).find('.bar').attr("Datenflag");
wenn(temp=="1"){
var w = $(diese).width();
var x = e.offsetX;
var p = parseFloat((x/w).toFixed(2))*100;
$(this).children(".img1").css('Breite',p+'%');
$(diese).children(".img2").css('links',p+'%');
}
})
$(Dokument).mouseup(Funktion(){
$(".img1,.img2").removeClass("stoppen");
$(".bar").attr("Datenflag","0")
})
})
</Skript>Erklärung der Ideen Es fühlt sich sehr einfach an. Verwenden Sie einfach zwei Bilder als Hintergrundbilder und steuern Sie deren Layoutposition sowie die Breite und Höhe des Containers. Die Größe des Hintergrundbilds muss für die adaptive Optimierung gesteuert werden. Natürlich gibt es kein Problem, wenn sich der übergeordnete Container nicht ändert. Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird. Das könnte Sie auch interessieren:
|
<<: Grafisches Tutorial (Fenster) zur Installation und Konfiguration von MySQL 5.7.21
>>: Detaillierte Erläuterung der Konfiguration und Optimierung des statischen Nginx-Dateidienstes
Artikel empfehlen
Natives JS zur Implementierung der Drag-Position-Vorschau
In diesem Artikel wird eine kleine Demo gezeigt, ...
Grafisches Tutorial zur Installation und Konfiguration der grünen Version von MySQL 5.7.21 winx64
Dieser Artikel beschreibt die Installations- und ...
Eine einfache Erklärung der parallelen MySQL-Replikation
1. Hintergrund der parallelen Replikation Zunächs...
Detaillierte Erklärung des Prinzips und der Verwendung des Cursors (DECLARE) in der gespeicherten MySQL-Prozedur
Dieser Artikel veranschaulicht anhand von Beispie...
So erstellen Sie mit virtualenv eine virtuelle Umgebung unter Windows (zwei Möglichkeiten)
Betriebssystem: Windows 10_x64 Python-Version: 3....
Vorteile von INSERT INTO SET in MySQL
Daten in MySQL-Datenbank einfügen. Bisher häufig ...
Es ist ganz einfach zu verstehen, was Node.js ist
Inhaltsverzeichnis Offizielle Einführung in Node....
Implementierung eines einfachen Timers basierend auf der Vue-Methode
Der einfache Timer von Vue dient Ihnen als Refere...
Beispielcode zur Implementierung eines Radardiagramms mit vue+antv
1. Abhängigkeit herunterladen npm installiere @an...
Ein Artikel zum Umgang mit Mysql-Datums- und Zeitfunktionen
Inhaltsverzeichnis Vorwort 1. Aktuelle Uhrzeit er...
Schritte zum Bereitstellen eines Spring Boot-Projekts mit Docker
Inhaltsverzeichnis Erstellen Sie ein einfaches Sp...
Detaillierte Erläuterung der Grundkenntnisse zur Front-End-Komponentenbildung
Inhaltsverzeichnis Grundlegende Konzepte von Komp...
js zur Realisierung der automatischen Sperrbildschirmfunktion
1. Anwendungsszenarien Es gibt eine solche Anford...
Analyse der neuen Funktionen von MySQL 8.0 - Transaktionales Datenwörterbuch und Atomic DDL
Vorwort Das Transaktionsdatenwörterbuch und das a...
Detaillierte Erklärung der Rolle des Schlüssels in React
Inhaltsverzeichnis Frage: Wird die Farbe des Bere...