Ich habe eine große horizontal scrollende Website. Denken Sie an eine Mario World als Beispiel. Jedes "Asset" ist absolut positioniert.
Ich möchte die Größe (Höhe und Breite) der Elemente relativ zum Ansichtsfenster des Browsers haben (also Prozentsätze verwenden), aber die Elemente mit tatsächlichen Pixeln von links usw. positionieren müssen.
Wenn ich dies tue, werden die Assets korrekt skaliert, wenn ich die Größe meines Browserfensters ändere. Aber die Positionen der Elemente sind in Pixeln, so dass sich die Dinge in Bezug auf den Hintergrund verschieben.
Gibt es eine einfache CSS-Lösung für dieses Problem? Das Verwenden von Prozentsätzen zum Definieren der Position (links: 50% zum Beispiel) ist nicht wirklich eine gute Lösung, da sie nicht sehr genau ist (siehe unten). Oder sollte ich das Resize-Event mit JS betrachten und so etwas tun? Wenn ja, wie?
Ich bin mir nicht sicher, ob ich jetzt einen Sinn habe. Lass es mich wissen, wenn es irgendwelche Fragen gibt.
Bearbeiten
Hier ist ein JSFiddle: Ссылка
Beachten Sie, dass der schwarze Block ( #blockpx ) bei der Größenänderung des Fensters mit Pixeln positioniert wird und daher während der Größenanpassung nicht betroffen ist. Der rote Block ( #blockpercentage ) wird jedoch mit Prozentsätzen skaliert und positioniert, um den gewünschten Effekt zu erzielen: An der beabsichtigten Position haften zu bleiben (die Position des Hintergrundbilds). Es ist jedoch nicht wirklich genau - was in diesem Beispiel nicht so wichtig ist, aber in einer größeren Einstellung (größere Breite) wird der Unterschied ziemlich hoch.
Die Lösung besteht darin, eine Kombination aus einem containing-Element und Javascript zu verwenden: Ссылка
Diese Geige enthält diese JavaScript-Funktionalität:
%Vor% Das Wichtigste, was hier zu beachten ist, ist, dass left und width Werte in Bezug auf das Element body berechnet wurden, was nicht beabsichtigt war.
Um dem entgegenzuwirken, haben wir ein containing-Element hinzugefügt, das das Bild und andere div -Tags enthält, die für die roten Blockgrafiken auf der Seite verwendet werden.
Allerdings wird das left -Attribut ohne JavaScript immer noch nur "aktualisiert", wenn die Seite neu geladen wird, nachdem die Größe des Fensters geändert wurde. Elemente auf Blockebene werden nicht horizontal aktualisiert.
Sie möchten also, dass left und width proportional zum Hintergrundbild sind, aber sie werden nicht aktualisiert, wenn die Größe der Seite geändert oder nur mit CSS verschoben wird. Die JavaScript-Lösung oben aktualisiert die Breite des enthaltenden Elements dynamisch, wenn die Größe der Seite geändert wird, um dieses Problem zu beheben.
Ich habe die Stile bottom und height css allein gelassen, da sie für die Zwecke Ihrer Website wie vorgesehen funktionieren. Der Container wächst in der Höhe, um das Bild darin aufzunehmen.
Ich bin mir nicht ganz sicher, was Sie mit dem schwarzen Fixed-Pixel-Block auf der Seite machen wollen, also habe ich ihn so belassen wie er ist.
BEARBEITEN: Ich habe dieses Projekt ernsthaft überarbeitet, eine Objektfabrik erstellt, um neue Grafiken zu erstellen, und den Code für die Seite aktualisiert. Diese Lösung benötigt fast kein HTML oder CSS, hat ein bisschen mehr JavaScript-Code, aber wird es viel einfacher machen, dynamische Grafiken auf der Seite / funktionaler Hinzufügung neuer Elemente zu implementieren. Ссылка
Die JavaScript-Lösung, die ich hier vorgestellt habe, verwendet Prozentwerte für die Echtzeitaktualisierung, um die Attribute width und left des prozentbasierten Blocks sowie die statischen Attribute height und bottom zu setzen / p>
Mit dieser Version können Sie die Methode PercentageBasedGraphic verwenden, um eine schwebende Box auf Ihrer Seite zu erstellen. Hier ist ein Beispiel:
Diese Funktion fügt ein div mit einem id = "block1" Attribut hinzu, mit den entsprechenden width , height , left und bottom Werten (alles in Prozent). Es gibt auch ein Objekt zurück, das alle Informationen enthält, die für die Größenänderung und Neupositionierung des soeben erstellten div benötigt werden. Sie können leicht auf diese Funktion erweitern, indem Sie jedem div verschiedene Klassen hinzufügen. Wie auch immer, wie nutzen wir unser zurückgegebenes Objekt endlich?
Die Funktion addGraphic fügt jede neue schwebende Box zu einem Array hinzu. Später werden wir bei der Fenstergrößenänderung durch dieses Array iterieren, um alle von uns definierten Schweberahmen neu zu positionieren.
Ich werde ehrlich zu dir sein, die Super Mario-Grafik hat mir viel Spaß gemacht, daran zu arbeiten.
Sie können versuchen, den Unterschied zwischen der alten (vor der Größenänderung) und der neuen (nach) Breite und Höhe des Fensters zu überprüfen und diesen Unterschied zu verwenden, um die untere und die linke Position zu ändern:
%Vor%probiere jsfiddle aus.
es ist eine jQuery-Variante, Sie können das gleiche mit einfachem Javascript tun.
Tags und Links javascript jquery css
