Untersuchung des Problems der Flip-Navigation mit geneigter Maus
|
In diesem Artikel analysieren wir als Beispiel die Erstellung einer geneigten Mouse-Flip -Navigation und hoffen, einigen Freunden zu helfen, die noch Fragen zur Erstellung einer Mouse-Flip-Navigation haben. Vorgestern hat mir eine Freundin aus dem Internet eine Seite geschickt und mich gebeten, ihr dabei zu helfen, herauszufinden, warum das Mouse-Rollover nicht funktioniert. Ich öffnete die Quelldatei und warf einen Blick darauf. Dabei stellte ich fest, dass der Autor nicht einmal über eine Mouseover-Funktion verfügte. Und über die Neigungsnavigation wurde nicht ausreichend nachgedacht. Obwohl mir diese Probleme damals auffielen, hatte ich keine Zeit, sie ihr zu erklären, weil ich gerade ein Projekt fertigstellte. Ich habe gestern gerade meine Arbeit beendet und mir jetzt die Akte zur Hand genommen, um sie mir anzusehen. Ich habe festgestellt, dass sich durch diesen Vorfall viele Wissenspunkte erklären lassen. Einige Stellen kann man leicht ignorieren, aber sie sind in der Tat sehr kritisch. Schauen wir uns zunächst an, welche Effekte wir erzielen möchten. Natürlich können diese vor der Umsetzung nur in unseren Köpfen oder Skizzen existieren. Wir müssen uns zunächst überlegen, wie es aussieht, und dann können wir analysieren, wie wir den gewünschten Effekt erzielen. Schauen wir uns ohne weitere Umschweife zunächst das Bild an:  Wenn wir das Bild oben betrachten, haben wir vielleicht das Gefühl, dass es nichts ist und einfach zu machen scheint. Lassen Sie uns diesen Effekt im Detail analysieren. Wenn wir die Standardimplementierung verwenden, können wir ein Bild nicht direkt in HTML einfügen. Um dies auf die standardmäßige Weise zu tun, müssen Sie CSS verwenden, um das Bild als Hintergrund aufzurufen. Schauen wir uns also an, ob eine solche Navigation direkt aufgerufen werden kann. Gibt es Probleme? Bitte schauen Sie sich das vergrößerte Bild dieses Navigationseffekts an:   Bitte beachten Sie, dass die „Gefahrenzone“ im obigen Bild sehr offensichtlich ist. Wenn wir zwei geneigte positive Blöcke zusammenfügen, entsteht zwangsläufig ein Wiederholungsbereich. Unser aktuelles CSS unterstützt keine Verarbeitung spezieller Formen. Um dieses Problem zu lösen, müssen sich die beiden Blöcke überlappen. Eine Überlappung erfordert die Platzierung auf unterschiedlichen Ebenen. Dies erfordert die Verwendung der Positionierung in CSS: „position: static | absolute | fixed | relative“. Beim Mouse-Rollover machen wir normalerweise aus allen Hintergründen ein Bild und legen dann mit CSS die unterschiedlichen Positionen der Bilder unter unterschiedlichen Tags fest. Vielleicht kommt jemandem die Idee, dass das Hintergrundbild dieser Navigation so aussehen sollte:  Wenn Sie das wirklich glauben, dann tritt das Problem auf: Wenn die Maus über einen der fünf Blöcke bewegt wird, blockieren die wiederholten Teile der obigen Gefahrenzone eine Ecke der linken und rechten Navigation. Der normale Weg ist also:   Nur so kann es als abschließendes Hintergrundbild ohne Gefahrenzone verwendet werden. Natürlich ist auch zu beachten, dass der Hintergrund nicht weiß, sondern transparent ist. Der Hauptzweck besteht darin, nicht mit dem Hintergrund der Website zu verschmelzen. Der Schlüssel besteht darin, den angrenzenden Hintergrund in der Gefahrenzone nicht zu blockieren. Ich verwende GIF-Bilder. Wenn GIF-Bilder transparent sind, treten einige Ecken und Kanten auf. Wenn Sie mit Website-Hintergründen in verschiedenen Farben arbeiten möchten, verwenden Sie am besten PNG oder wandeln Sie die Ränder des GIF-Bildes in Pixel um. Nachdem wir über dieses Hintergrundbild nachgedacht haben, müssen wir darüber nachdenken, wie wir diese Navigation gestalten. Lassen Sie uns zunächst das Mouse-Rollover analysieren. Ursprünglich wurde das Mouse-Rollover von JS durchgeführt, aber jetzt können wir CSS’s :hover verwenden, um diesen Effekt mit weniger Code und einer klaren Struktur zu erzielen. Das Umdrehen dieser fünf Navigationen wird also durch A:hover erreicht. |
<<: Auswahl und Überlegungen zur MySQL-Datensicherungsmethode
>>: So verwenden Sie das Marquee-Tag im XHTML-Code
Artikel empfehlen
Erstellung von Webseiten – Grundlegende Deklaration – Dokumenttypbeschreibung (DTD
Die Verwendung von CSS-Layouts zum Erstellen von W...
So verwenden Sie mysqldump zum Sichern von MySQL-Daten
1. Einführung in mysqldump mysqldump ist ein logi...
Docker startet das Elasticsearch-Image und behebt den Fehler nach dem Mounten des Verzeichnisses
Ein ES-Image vom Docker-Hub heruntergeladen, Vers...
Docker installiert das offizielle Redis-Image und ermöglicht die Kennwortauthentifizierung
Referenz: Offizielle Docker-Redis-Dokumentation 1...
MySQL 5.7.18 Installations-Tutorial unter Windows
In diesem Artikel wird erklärt, wie Sie MySQL aus...
Details zum JavaScript-Prototyp und zur Prototypkette
Inhaltsverzeichnis 1. Prototyp (expliziter Protot...
Ein paar Dinge, die Sie über responsives Layout wissen müssen
1. Einleitung Responsive Webdesign ermöglicht die...
So installieren Sie MySQL 8.0 in Docker
Umgebung: MacOS_Cetalina_10.15.1, Mysql8.0.18, Do...
Detaillierte Erklärung des Javascript Echarts Luftqualitätskarteneffekts
Wir müssen zunächst die Luftqualitätsdaten mit de...
Bringen Sie Ihnen den detaillierten Prozess der Verwendung von Docker zum Erstellen der chinesischen Version der Gitlab-Community bei
1. Verwenden Sie Docker Compose, um den Start zu ...
Implementierung der CSS-Variableneinfügung im Vue3-Stil
Inhaltsverzeichnis Zusammenfassung Einfaches Beis...
Docker und iptables sowie Implementierung von Netzwerkisolations- und Kommunikationsvorgängen im Bridge-Modus
Docker bietet mehrere Netzwerke wie Bridge, Host,...
Neue Möglichkeiten zum Spielen mit CSS-Schriftarten: Implementierung farbiger Schriftarten
Was wäre, wenn Ihre Designer die folgende Schrift...
Detaillierte Erläuterung der Verwendung von Gulp.js, einem leistungsstarken Tool für die Front-End-Aufgabenerstellung
Inhaltsverzeichnis Überblick Installieren Sie Gul...
CSS zum Ändern der Größe (Breite, Höhe) des Bildes, wenn die Maus über den Bild-Hyperlink fährt
So ändern Sie den Bild-Hyperlink, wenn Sie mit der...