Viele Online-Shops und E-Commerce-Websites verwenden ein kleines Detailfenster, um weitere Informationen zu einem Produkt bereitzustellen. Ich erinnere mich an die Anfänge des Durchsuchens von Template Monster und es hat sich zu einem gemeinsamen Trend für moderne Webdesigner entwickelt.
In diesem Tutorial möchte ich erklären, wie wir diesen Effekt mit sehr einfachem Code duplizieren können. Ich habe zwei verschiedene Versionen bereitgestellt, eine basierend auf jQuery und eine andere, die mit CSS3 erstellt wurde. Jeder hat Vorteile und Sie können eine Kopie meines Tutorial-Codes herunterladen, um zu sehen, welchen Sie bevorzugen.
jQuery Demo - CSS3 Demo - Quellcode herunterladen
Strukturierung der Seite
Meine jQuery-Version hat ein etwas anderes HTML-Setup als die CSS3-Anpassung. Natürlich benötigen wir eine Kopie der jQuery-Bibliothek, aber noch wichtiger ist die Handhabung des Detailbereichs. Mit JS rufe ich ein einzelnes HTML-Element auf, um den inneren HTML-Inhalt zu ersetzen. CSS3 erfordert eindeutige div-Elemente neben jedem Miniaturbild-Link und fügt somit Ihrer Seite mehr Volumen hinzu.
Dieser Code befindet sich im Hauptteil meiner jQuery-Version. Die Miniaturansichten sind in Listenelemente unterteilt, in denen Informationen aus den HTML-Attributen für das Detailfenster extrahiert werden. Diese Details finden Sie im Anker-Link, im Image-Tag und in einem verwandten Meta-Tag, das die Inhaltsbeschreibung enthält. Ich verwende auch ein HTML5-Datenattribut für das Veröffentlichungsdatum.
Unten sehen Sie ein einzelnes Container-Div mit der ID # Detailbereich. Durch die Ausrichtung auf dieses Objekt in jQuery können wir innere Werte für die Schwebeflugdetails ersetzen. Betrachten wir nun ein Listenelement aus der CSS3-Version.
Ich habe die ID in eine Klasse von geändert Detailbereich weil wir mehrere benachbarte divs neben jedem thumbnail benötigen. CSS3 prüft, wann sich der Benutzer im Link befindet, und zeigt das gleichgeordnete div an, das bereits alle Informationen enthält. Ein weiterer Vorteil bei der Verwendung von CSS3 ist, dass wir nicht jedes Mal Informationen aus Attributen ziehen müssen, wenn sich die Zielanzeige ändert.
Ich möchte mit dem CSS3-Beispiel beginnen, da mein jQuery-Code etwas komplizierter ist. Dies könnte ein weiterer Grund sein, bei der Frontend-HTML / CSS-Version zu bleiben, obwohl dieser Effekt in älteren älteren Browsern verloren geht.
Hover-Details mit CSS3
Die Art und Weise, wie dies funktioniert, verwendet ein Pluszeichen (+) im Selektor. CSS zielt auf das allerletzte Element des Selektors ab, in diesem Fall auf unser Detailbereich die direkt neben jedem Ankerlink gefunden wird. Ich habe den Links eine Klasse gegeben .hvrlink so sind sie leichter zu identifizieren.
Ich hoffe, es ist nichts zu kompliziert in diesem ersten Setup-Block. Jedes Listenelement wird mit einem breiten Rand nach links verschoben, um nur zwei Miniaturbilder pro Zeile zu positionieren. Diese Listenelemente enthalten den Thumbnail-Link und das Detailfenster. Wir geben die
Was Sie möglicherweise interessieren könnte, ist der Positionswechsel zwischen den ersten beiden Links. Für jeden anderen Link habe ich eine Klasse hinzugefügt .rechte Seite auf den Detailplattencontainer. Ursprünglich schieben wir den Schwebeflug nach links über 290px, da dies die Länge des Miniaturbilds ist. In der rechten Spalte befindet sich dieses Panel jedoch außerhalb des Bildschirms, sodass es stattdessen auf der linken Seite erscheinen soll. Hierbei wird eine negative linke Position basierend auf der gesamten Breite des Detailbereichs von 530 Pixeln verwendet.
Diese letzten beiden Selektoren sind alles, was Sie benötigen, um die Schwebeflugeinstellung richtig zu gestalten. Wenn der Benutzer über einen Thumbnail-Link mauset, wird das zugehörige Element sofort angezeigt Detailbereich. Der zweite Codeblock zeigt die Anzeige auch dann an, wenn der Benutzer die Miniaturansicht mit den Details markiert, sodass er immer angezeigt wird, bis der Benutzer das betreffende Listenelement vollständig verlassen hat.
Umzug zu jQuery
Lassen Sie uns den JS-Code unten in meinem Original behandeln index.html Datei. Der CSS-Code ist größtenteils ähnlich, aber er ist noch kürzer und einfacher zu lesen, da keine absoluten Werte erforderlich sind. Dies wird stattdessen von jQuery-Berechnungen durchgeführt, die kompliziert erscheinen können - aber alles macht Sinn, wenn Sie darüber nachdenken.
Ich ziele auf das Miniaturbild für den Hover-Ereignis-Listener, und sobald dies ausgelöst wird, richten wir eine ganze Reihe von Variablen ein.Mit dem ersten großen Codeblock werden alle wichtigen Informationen abgerufen, die wir in den Hover-Panel-Container einfügen müssen.
Als Nächstes müssen wir Koordinaten sammeln, um zu verstehen, wo dieses Detailfenster angezeigt werden soll. Die y-Koordinate ändert sich nicht basierend auf der Position, aber die x-Koordinate wird sich ändern, wenn wir uns in der rechten Spalte befinden. Ich habe eine logische Anweisung, die die aktuelle Bildposition durch das gesamte Fenster mit vergleicht $ (window) .width (). Wenn das Bild 50% der Gesamtseitenbreite überschreitet, muss es auf der linken Seite anstelle der rechten Seite angezeigt werden.
Dieser nächste Satz von Code ersetzt interne HTML-Werte im Detailbereich mithilfe der zuvor definierten Variablen. Am Ende aktualisieren wir die Inline-CSS-Eigenschaften, um sie zu ändern Bildschirmsperre und lassen Sie es auf der Seite erscheinen. Wenn Sie den Mauszeiger von der Miniaturansicht halten, wird die Anzeige automatisch wieder ausgeblendet, es sei denn, wir bewegen uns auf den Detailbereich. Dieser Schwebeflug wird mit einem separaten Ereignis-Listener erfasst, der ein wenig komplizierte Logik erfordert.
Hinweis Ich verwende zwei separate .on () - Methoden, die an den gleichen jQuery-Selektor angehängt sind. Sie könnten diese in einer jQuery-Kette zusammen mit anderen ähnlichen Ereignis-Listenern koppeln. Wenn Sie den Mauszeiger bewegen, müssen Sie das Feld nur als Blockelement anzeigen lassen. Wenn Sie das Detailfenster jedoch verlassen, möchten Sie es nur ausblenden, wenn der Benutzer nicht auf das gleiche Miniaturbild zeigt, das für die Anzeige verwendet wurde.
Die Variable e wird von jedem Mouseout-Ereignis zurückgegeben, das uns mitteilt, welches neues Element in der Schwebe gehalten wird. Anwenden der Eigenschaft Elternknoten Wir können herausfinden, wo dieses neue Element enthalten ist. Ich habe vier separate Logikprüfungen in dieser Anweisung, und drei von ihnen prüfen mit Objekten im Detailbereich. Der Variablenname diese bezieht sich auf # Detailbereich.
Wir müssen überprüfen, ob der Benutzer das h3-Element, den Absatz oder sogar das Bild (das in einen Anker-Link und ein Div eingebettet ist) bewegt. Wenn ja, dann verstecken wir nichts.
Ich überprüfe auch mit dem Knotenname Diese Eigenschaft ist für den Fall, dass der Benutzer den Detailbereich in den Körper einführt. Wenn der Knoten IMG zurückgibt, sollte er nicht versuchen, etwas sofort auszublenden. Dies ist eher eine gehackte Lösung, da die einzigen Bilder in meiner Demo sich auf die Thumbnails selbst beziehen. Wenn Sie den Mauszeiger auf das Bild bewegen, möchten wir das Fenster dennoch angezeigt lassen, andernfalls wird es mit der .css () -Methode von jQuery ausgeblendet.
Ich habe keine bessere Lösung gefunden, aber ich würde gerne Feedback von anderen Entwicklern hören. Es kann möglich sein, die Bildklasse zu überprüfen, aber mit a können Sie dies leider nicht tun Knotenname Eigentum. Sie finden meinen kommentierten Code console.log (e.nodeName) Mit dieser Option können Sie prüfen, welche Eigenschaften diese Eigenschaften an den Browser zurückgeben.
jQuery Demo - CSS3 Demo - Quellcode herunterladen
Schließen
Diese Techniken sind im Allgemeinen einfach zu verstehen, wenn Sie mit der Frontend-Webentwicklung vertraut sind. CSS3 bietet eine einfache Lösung, funktioniert jedoch nur in standardkonformen Browsern ordnungsgemäß. Sie werden feststellen, dass beide Versionen aus Sicht des Besuchers grundsätzlich gleich sind. Probieren Sie dies in Ihrem nächsten Webprojekt aus und sehen Sie, was Sie noch auf meiner Vorlage aufbauen können.