Wie zentriert man das Bild in der spezifischen div-Datei gemäß der aktuellen Ansichtsfensterposition?
Ich versuche eine schöne Animation während des Ladens von Inhalten mit Ajax zu erstellen. Ich möchte das Display-Icon beim Neuladen von div mit "Content" verwenden, aber ich kann nicht herausfinden, ob das nur mit CSS möglich ist.
Symbol sollte:
- horizontal immer in der Mitte von div mit "Inhalt"
- vertikal immer in der Mitte von "visible part of content"
- sollte während der gesamten Animation in der vertikalen Mitte von "visible part of content" während der Folienanimation bleiben, wodurch Menu ausgeblendet wird.
Wenn eine vertikale Zentrierung gemäß "sichtbarer Teil des Inhalts" nicht möglich ist, wäre es in Ordnung, das Bild entsprechend dem Ansichtsfenster des Browsers zu zentrieren.
[EDIT] :
Hier ist meine Geige: Ссылка und der Teil, der wahrscheinlich geändert werden sollte:
%Vor%5 Antworten
Damit dies Ihren Anforderungen entspricht, müssen Sie JavaScript verwenden, um zu bestimmen, wo das Ladebild über den sichtbaren Teil platziert werden muss. Verwenden Sie dazu ein festes Positionsdiv und positionieren Sie es neu, wenn der Benutzer die Größe des Fensters ändert oder das Fenster scrollt es ist immer in der gewünschten Position.
%Vor% Bitte beachten Sie, dass Sie immer die Funktion scrolling() aufrufen müssen, um die Position neu berechnen zu können, wenn Sie die Breite des div ändern.
Ich habe auch das geladene Bild als Hintergrundbild zum festen div hinzugefügt, so dass wir CSS verwenden können, um es zu zentrieren.
%Vor%Hier ist der JSFiddle Ссылка
Sie müssen nicht so viel Scripting machen, um ihm eine Position zuzuweisen. Sie können es mit einfachen CSS tun.
Machen Sie den Loader nur relativ zu seinem Elternteil. Weisen Sie eine Höhe und Breite zu und führen Sie den folgenden CSS-Teil aus.
.loader {Position: relativ; oben: -Halb der Höhe; links: -halb der Breite; Rand oben: 50%; Rand links: 50%; } funktioniert mit jedem Gerät
Das obige löst die Hälfte des Problems, Sie müssen das linke dynamisch mit Javascript aktualisieren.