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
Detailliertes Tutorial zum Einrichten mehrerer Instanzen von MySQL 8 auf CentOS 7 (Sie können so viele haben, wie Sie möchten)
Ursache Ich habe vor Kurzem mit der Umstrukturier...
Detailliertes Beispiel für MySQL ähnlich dem Schreiben von Oracle Rownum
Rownum ist eine einzigartige Schreibmethode in Or...
Detaillierte Erläuterung des Beispiels zum Einbetten von Videos in eine HTML-Seite und zum Umschalten von Videos mit JS-Steuerung
Zunächst lautet der HTML-Code zum Einbetten des Vi...
Implementierung der Codeaufteilung von Webpack3+React16
Projekthintergrund Seit kurzem gibt es ein Projek...
Docker-Compose-Schritte zum Konfigurieren der Spring-Umgebung
Vor Kurzem musste ich das Projekt für die Mitglie...
Detaillierte Erläuterung der MySQL-Transaktionsverarbeitung
1. MySQL-Transaktionskonzept MySQL-Transaktionen ...
Implementierung von erzwungenen Zeilenumbrüchen und Nicht-Zeilenumbrüchen in div, td, p und anderen Containern in HTML
1. Erzwingen Sie keinen Zeilenumbruch und beenden ...
Detailliertes Tutorial zur Verwendung des Prettier Code-Plugins in vscode
Warum prettier verwenden? In großen Unternehmen k...
Über den Fehler des Better-Scroll-Plug-Ins, der nicht gleiten kann (gelöst durch Plug-In im Jahr 2021)
Better-Scroll-Bildlaufprinzip Als übergeordneter ...
So aktivieren Sie die JMX-Überwachung über Tomcat
Erstellen Sie eine Simulationsumgebung: Betriebss...
Der komplette Prozess der iptables-Regeln in Docker geht nach dem Neustart von iptables verloren
Ursachen und Folgen 1. Wenn Sie den Ansible-Befeh...
Vue + Element UI realisiert Ankerpositionierung
In diesem Artikelbeispiel wird der spezifische Co...
So schreiben Sie mit nodejs ein Tool zur Generierung von Entitätsklassen für Datentabellen für C#
Obwohl Microsoft T4-Vorlagen bereitstellt, finde ...
Installieren Sie Ubuntu 18 ohne USB-Laufwerk unter Windows 10 mit EasyUEFI
1. BIOS überprüfen Überprüfen Sie zunächst, in we...
Detaillierte Erläuterung zur Lösung des Problems des domänenübergreifenden Zugriffs auf statische Nginx/Apache-Ressourcen
1. Domänenübergreifender Zugriff auf statische Ap...