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
HTML-Grundlagen-Zusammenfassungsempfehlung (Textformat)
HTML-Tags zur Textformatierung 標簽 描述 <b> 定義...
Detaillierte Erläuterung der Implementierung einer regelmäßigen Sicherung von MySQL-Datenbanktabellen
Durchführung regelmäßiger Backups von Mysql-Daten...
Detaillierte Erklärung der Linux-Befehle und der Dateisuche
1. Führen Sie eine Dateinamensuche durch which (S...
VMware ESXI-Servervirtualisierungscluster
Inhaltsverzeichnis Zusammenfassung Umgebung und W...
Einige Vorschläge zur Gewährleistung der MySQL-Datensicherheit
Daten sind das wichtigste Kapital eines Unternehm...
Der Prozess der Installation und Konfiguration von Nginx in Win10
1. Einleitung Nginx ist ein kostenloser, quelloff...
Informationen zum Vue-Komponentenwechsel, dynamischen Komponenten und Komponenten-Caching
Inhaltsverzeichnis 1. Komponentenwechselmethode M...
Lernen Sie, wie Sie in 6 Sekunden 1 Million Datensätze in MySQL einfügen
1. Idee Es dauerte nur 6 Sekunden, um 1.000.000 D...
jQuery realisiert den Scroll-Effekt von Tabellenzeilendaten
In diesem Artikelbeispiel wird der spezifische Co...
MySQL verwendet SQL-Anweisungen zum Ändern von Tabellennamen
In MySQL können Sie die SQL-Anweisung „rename tab...
Implementierung der Fastdfs+Nginx-Clusterkonstruktion
1. Einführung in Fastdfs 1. Was ist Fastdfs? Fast...
So bedienen Sie JSON-Felder in MySQL
MySQL 5.7.8 führte das JSON-Feld ein. Dieser Feld...
Einige CSS-Fragen, die Ihnen während eines Vorstellungsgesprächs gestellt werden könnten
Dieser Artikel dient lediglich der Erinnerung an ...
So vergleichen Sie zwei Datenbanktabellenstrukturen in MySQL
Während des Entwicklungs- und Debugging-Prozesses...
Detaillierte Untersuchung von vue2.x - Erklärung der h-Funktion
Inhaltsverzeichnis Lösung, Zusammenfassen: Vue-Pr...