de.hideout-lastation.com
Paradies Für Designer Und Entwickler


So erstellen Sie reines CSS onClick Image Zoom-Effekt

CSS hat keine Pseudoklasse für das Targeting von Klickereignissen, und dies ist einer der größten Schwachpunkte von Frontend-Entwicklern. Die am nächsten liegende Pseudoklasse ist :active die ein Element für den Zeitraum formatiert, in dem ein Benutzer seine Maus darüber hält.

Dieser Effekt ist jedoch von kurzer Dauer: Sobald der Benutzer die Maus loslässt, : :active funktioniert nicht mehr. Wir müssen eine andere Möglichkeit finden, das Klickereignis in CSS zu emulieren .

Dieser Post wurde als Reaktion auf die Anfrage eines Lesers geschrieben und erklärt, wie man das Click-Ereignis mit reinem CSS in einem bestimmten Anwendungsfall, dem Bild-Zoom, anvisieren kann .

Sie können das Endergebnis unten sehen - eine CSS-Lösung für Bildzoom bei Klick .

Wann sollte die CSS-Lösung verwendet werden?

Bevor ich fortfahre, möchte ich sagen, dass ich für den Bildzoom die CSS-only-Methode (die die Abmessungen des Bildes ändert) nur dann empfehle, wenn ein einzelnes oder eine Gruppe von wenigen Bildern die Zoom-Funktion haben soll.

Für eine korrekte Galerie bietet JavaScript mehr Flexibilität und Effizienz.

Front-End-Techniken, die wir verwenden werden

Nun, da Sie gewarnt wurden, lassen Sie uns schnell die drei wichtigsten Techniken betrachten, die wir verwenden werden:

  1. Das HTML-Tag, mit dem Browser verknüpfbare Bereiche über ein Bild erstellen können . Lesen Sie mehr auf der Element in meinem früheren Beitrag.
  2. Das usemap Attribut des Tag, der das Bild an die Imagemap anschließt.
  3. Die CSS-Pseudoklasse :target, die ein Element darstellt, das mit dem ID-Selektor angesprochen wurde.
1. Erstellen Sie die HTML-Basis

Lassen Sie uns zuerst die HTML-Basis erstellen. Im folgenden Code fügen wir ein Bild hinzu, das vergrößert und verkleinert werden soll, und schließen Schaltflächensymbole zum Vergrößern und Verkleinern.

Es ist wichtig, eine ID auf dem zu vergrößernden Bild zu haben, und die Schließen-Schaltfläche muss ein Link sein, der das Attribut href="#" hat. Ich werde später im Beitrag erklären, warum.

2. Fügen Sie das CSS hinzu

Anfangs sollte das Schließen-Symbol nicht angezeigt werden . Die Eigenschaften " position, " margin-, " left und " bottom platzieren die Symbole "Erweitern" und "Schließen" an der Stelle, an der sie sich befinden sollen - in der oberen rechten Ecke des Bildes.

Die pointer-events: none; Mit dieser Regel können Mausereignisse das Expand-Symbol passieren und das Bild erreichen .

 .img {Höhe: 150px; Breite: 200px; } .close {Hintergrundbild: URL ("Close-icon.png"); Hintergrund-Wiederholung: keine Wiederholung; unten: 418px; Anzeige: keine; Höhe: 32px; links: 462px; Rand oben: -32px; Position: relativ; Breite: 32px; } .expand {unten: 125px; Rand links: -32px; Rand rechts: 16px; Zeiger-Ereignisse: keine; Position: relativ; } 
3. Fügen Sie die Imagemap hinzu

In der Imagemap sollte der anklickbare Bereich in der oberen rechten Ecke des Bilds direkt unter dem Symbol "Expand" und in seiner Größe angezeigt werden. Setze das Element vor dem ersten Tag im HTML-Code. Wir binden das Bild im nächsten Schritt an die Karte.

Im Codeblock oben, der tag definiert die Form, Größe und den URI eines verknüpfbaren Bereichs innerhalb einer Imagemap . Bei einer rechteckigen Form nimmt das Attribut shape den rect Wert an, und die vier Werte des Attributs coords repräsentieren den Abstand in Pixel zwischen:

  1. der linke Rand des Bildes und der linke Rand des Verknüpfungsbereichs
  2. der obere Rand des Bildes und der obere Rand des Linkbereichs
  3. der linke Rand des Bildes und der rechte Rand des Linkbereichs
  4. die obere Kante des Bildes und die untere Kante des Linkbereichs

Der Wert des href Attributs muss der Hash-Bezeichner des Bildes sein (deshalb sollte das Bild eine id ).

4. Binden Sie das Bild an die Imagemap

Fügen usemap dem Bild das Attribut usemap, um es an die usemap zu binden . Sein Wert muss die Hash-Darstellung des Namensattributs des. Sein Tag, den wir in Schritt 3 hinzugefügt haben.

 Wie funktioniert der Schließen-Button? 

Da die Schaltfläche Schließen als Hintergrundbild hinzugefügt wurde (Schritt 2) und tatsächlich ein Tag mit dem Attribut href=# (Schritt 1), wird beim Anklicken die Fragmentkennung vom Ende des URI entfernt. Daher entfernt es auch die Pseudo-Klasse :target aus dem Bild und das Bild wird auf seine vorherige Größe zurückgesetzt .

Jetzt ist der CSS-only-Zoom-on-click-Effekt fertig, sieh dir die Demo unten an, oder lies ein bisschen mehr über die Theorie hinter Image Maps im nächsten Abschnitt.

Hintergrundinfo: Warum? und nicht?

Inzwischen wissen Sie sicherlich, dass das wichtigste Ziel für diese CSS-Lösung darin besteht, das Bild mit dem Attribut href="#imgid" könnte auch mithilfe des Tags anstelle der href="#imgid" erfolgen.

Dies kann wahr sein, aber wenn es um Bilder geht, verwenden Sie die Element ist geeigneter. Es ist noch wichtiger, dass der Zoom beim Klicken auf einen größeren Bereich im Bild statt nur auf das Symbol "Erweitern" ausgeführt wird. gibt Ihnen eine einfache Lösung.

Der default für das shape Attribut erstellt einen rechteckigen verknüpfbaren Bereich, der das gesamte Bild abdeckt . Wenn Sie stattdessen verwenden würden, müssten Sie es codieren, um das Bild abzudecken, und Sie müssen möglicherweise auch ein Wrapper-Element für den gleichen Zweck verwenden.

Um auch über die Vorbehalte dieser Lösung zu sprechen, wird die CSS-Eigenschaft pointer-events (die wir in Schritt 2 verwendet haben) von Internet Explorer erst ab Version 11 unterstützt .

Um IE-Browser vorher zu unterstützen, möchten Sie vielleicht statt dessen verwenden oder lassen Sie das Bild durch Klicken auf eine beliebige Stelle vergrößern (in diesem Fall ist das Symbol "Erweitern" nicht erforderlich).

Hinzufügen und Entfernen von HTML-Klassen auf Anfrage Mit jQuery

Hinzufügen und Entfernen von HTML-Klassen auf Anfrage Mit jQuery

Das Hinzufügen neuer HTML-Klassen ist ein Kinderspiel. Öffnen Sie einfach das HTML-Dokument, suchen Sie, was Sie hinzufügen möchten, fügen Sie die Klasse ein und benennen Sie sie. Wenn es jedoch darum geht, eine interaktive Website zu erstellen, die es Ihren Besuchern ermöglicht, sich damit zu beschäftigen, müssen Sie auf Wunsch die HTML-Klassen ändern, einfügen und entfernen.Sie könne

(Tech- und Design-Tipps)

Mobile Emulation in Google Chrome

Mobile Emulation in Google Chrome

Einfach gesagt, wir lieben Google Chrome. Es läuft reibungslos, sieht einfach aus und hat viele nützliche Apps. Aus Sicht des Entwicklers ist Google Chrome immer einen Schritt voraus, wenn es darum geht , den neuesten Web-Standard zu unterstützen, was großartig ist.Es enthält auch eine Reihe von Tools für die Web-Entwicklung, von denen einige noch in anderen Browser -integrierten Entwickler-Tools implementiert werden müssen. Dazu

(Tech- und Design-Tipps)