Ich habe ein einfaches Layout erstellt, in dem ich drei divs habe, die interagieren. Einer ist das Logo in der Mitte des Bildschirms und der andere sind zwei Blöcke, die mit jQuery aus dem Bildschirm bewegt werden. Ich habe die Option skew von CSS verwendet, um eine Gradumwandlung anzuwenden. Ich möchte den bestimmten Grad abhängig vom Bildschirm anwenden, so dass dieser Grad für alle Bildschirme korrekt gilt.
Visuelles Beispiel: Ссылка
Für jetzt habe ich diesen Code:
HTML:
%Vor%CSS:
%Vor%jQuery:
%Vor%Verwenden Sie Trigonometrie, um den gewünschten Winkel zu berechnen:
%Vor%(Anmerkung für Mathe-Geeks und andere Pedanten: Der Arkustangens würde normalerweise die Höhe geteilt durch die Breite nehmen, nicht umgekehrt. In diesem Fall aber neigen wir eine vertikale Linie statt einer horizontalen, also Der obige Code gibt das gewünschte Ergebnis.)
Beachten Sie, dass neuere Versionen von jQuery automatisch das erforderliche -webkit- oder -moz- Präfix dieser CSS transform Eigenschaft hinzufügen.
Vielleicht möchten Sie auch display:none die Elemente, bis der obige Code den Winkel ändern kann, und dann show() sie unmittelbar nach der Berechnung des Winkels:
Ich benutze nur die Tatsache, dass ein DOM-Element mit zwei verschiedenen Grenzen für oben und rechts in einer diagonalen Linie entsteht, wo beide sich treffen. Setzen Sie dann die Höhe und Breite des DOM-Elements auf Null und setzen Sie die obere Grenze der Breite auf Fensterhöhe und die Breite der rechten Breite auf die Fensterbreite. Aktualisieren Sie es mit JavaScript auf Größe ändern ... Das ist alles.
Ich habe einen Container in das DOM gelegt
%Vor%Folgendes CSS ist notwendig
%Vor%und folgen Sie JavaScript, um die Größe zu ändern
%Vor%OK, die Lösung mit CSS-skew ist nett, aber diese funktioniert mit CSS & lt; 3
Tags und Links javascript jquery dynamic responsive-design diagonal