Ich versuche, ein gleitendes horizontales Layout mit einem Header-Banner zu implementieren.
Dies ist die HTML-Struktur:
%Vor%Die Kopfzeile ist fixiert und die Panels wurden mit einem Hintergrund mit Farbverlauf versehen (das mittlere Panel hat eine andere Farbe für den Debug-Zweck). Hier ist das CSS:
%Vor%Und schließlich die Funktion, die die Animation zwischen Panels verwaltet:
%Vor%Die Probleme, mit denen ich konfrontiert bin, sind die folgenden:
1) Ich habe versucht, eine jQuery-Funktion zu implementieren, um die Folienanimation auszuführen, wenn der Benutzer das Mausrad verwendet, aber keiner meiner Tests funktioniert ... die Struktur ist immer dieselbe:
%Vor%2) Wenn mein Browserfenster 100% groß ist, scheint alles gut zu funktionieren, aber wenn ich den Zoom verkleinere oder vergrößere, wird alles versaut & gt; & lt; Ich stelle fest, dass es möglich ist, damit umzugehen, und hier ist ein Beispiel:
Um Ihre Ziele zu erhalten, können Sie einfach ein Array mit dem Element panel class füllen und dann einen Index verwenden, um sich durch die Bereiche zu bewegen.
Wenn Sie Probleme mit der Fenstergröße haben, können Sie dieses Event und mach was du willst
Sehen Sie sich MouseWheelEvent an.
Und versuchen Sie dieses Beispiel mit Ihrem Code:
Im Unravel habe ich das mit CSS und JavaScript mit transform3d und einigen anderen CSS-Tricks gemacht. Wenn Sie das Scroll-Ereignis erhalten möchten, wird es nicht passieren, während Sie überlaufen: versteckt auf dem Körper, weil Sie gerade dem Browser gesagt haben, alle seine Schriftrollen zu verstecken! Also, was ich versucht habe, um das Problem, das Sie jetzt haben, zu lösen, war, das Mausrad-Ereignis zu verwenden, das sich so verhält:
%Vor%Es gibt eine wheelDelta-Eigenschaft, die 120 zurückgibt, wenn Sie mit dem Mausrad vorwärts fahren, oder -120, wenn Sie mit dem Mausrad rückwärts fahren, also habe ich einen Zähler angehängt, damit ich weiß, wie oft das Mausrad ausgelöst wurde:
%Vor%Dies ist nur für Sie, um mit dem Erstellen der Logik fortzufahren, die erstellt werden soll, wenn das Mausrad zu einem anderen Feld wechselt, und viel Glück!