Effekt 1:
1. Erstens ist der gesamte untere schwebende Durchschnitts-AD am unteren Rand des Browsers festgelegt. Während der Browser scrolls die untere schwimmende Anzeige immer im Browserfenster. Hier sind einige wichtige Punkte: durch Spalte, fest und schwarz.
Also: Zunächst müssen wir die Gesamtbreite der schwimmenden Säulenwerbung 100%geben und zweitens eine feste Positionierung dafür einstellen, die am unteren Rand des Browsers festgelegt ist, die Hintergrundfarbe schwarz und die Transparenz 0,7 beträgt.
.footFixed {Breite: 100%; Höhe: 140px; / * Die Bildgröße, die Breite muss 100% sein */ Position: behoben; unten: 0; /* Fixpositionierung, am Boden des Browsers festgelegt. */ Hintergrund: #081628; Deckkraft: .7; /*Chrome, Safari, Firefox, Opera*/Filter: Alpha (Opazität = 70);/*für IE8 und frühere Versionen*/}2. Das Bild der schwimmenden Säulenwerbung unten ist als höher als der Hintergrund (Hintergrundhöhe: 140px, innere Bildhöhe: 218px)
Und der Gesamtinhalt ist teilweise zentriert.
.Fimg {Höhe: 218px; /*Beachten Sie, dass die Bildhöhe hier höher als 140px ist*/ width: 1190px; Rand: 0px Auto; /*Der Gesamtinhalt ist zentriert*/}Da die Höhe des unteren suspendierten Werbeinhalts Teil 218px jedoch größer ist als die Höhe des festgelegten übergeordneten Elements 140px, beträgt die Höhenunterschiede 78px 78px
Der folgende Effekt wird erzeugt und das Bild kann nicht abgeschlossen werden:
Dies erfordert, dass das Bild auf 78px verschoben wird, und die Gesamtpositionierung des gesamten schwebenden Werbeinhaltsteils unten ist erforderlich.
.Fimg {Position: Relativ; /*Übergeordnetes Element Relative Positioning*/ Top: -78px; }Ergebnis:
Hier ist eine Frage:
Das Bild ist aufgrund der zusätzlichen Transparenz nicht sehr klar.
Um dieses Problem zu lösen, verwenden Sie einen DIV, um den Hintergrund festzulegen, anstatt die Hintergrundfarbe in .footfixed festzulegen.
<div> </div>
.ftbj {Position: absolut; Hintergrund:#081628; Höhe: 100%; Breite: 100%; Top: 0; links: 0; Opazität: .7;/*Chrome, Safari, Firefox, Opera*/Filter: Alpha (Opazität = 70);}/*für IE8 und frühere Versionen*/. Fußfixed {Breite: 100%; Höhe: 140px; / * Bildgröße, Breite muss 100% sein */ Position: behoben; unten: 0; /*Fixpositionierung, am Boden des Browsers festgelegt. */ Hintergrund: #081628; Deckkraft: .7; /*Chrome, Safari, Firefox, Opera*/Filter: Alpha (Opazität = 70);/*für IE8 und frühere Versionen*/}Auf diese Weise das Effektbild:
Das macht es viel klarer.
3. Die Auswirkung der Schließung:
Zunächst ist die Schaltfläche an der oberen rechten Ecke des Werbebilds befestigt, indem das Bild positioniert wird. Die Bildgröße muss festgelegt werden, der Bildeinführungspfad muss verwendet werden, um den gesamten Teil des schwimmenden Werbeinhalts unten zu positionieren, und die Schließung besteht darin, ihn absolut zu positionieren.
.Fimg {Position: Relativ; /*Relative Positionierung von übergeordneten Elementen*/}. Schließen {width: 33px; Höhe: 33px; /* Bildgröße*/Hintergrund: URL (Bilder/Close.png) No-Repeat Center; /*Bildeinführungspfad*/ Position: absolut; Rechts: 15px; Oben: 85px; /*Behoben, um es auf der gesamten unteren und suspendierten oberen rechten Ecke des Werbebilds zu beheben*/}Zweitens bewegen Sie die Maus auf den Schließknopf, und eine kleine Hand wird angezeigt, und der Schließknopf dreht sich.
Um Animationseffekte zu erzeugen, fügen Sie Übergang hinzu
.CLOSE {Übergang: .5s; Cursor: Zeiger; /*An der oberen rechten Ecke des Bodens durch Positionierung*/}. Schließen: Hover {Transformation: Drehen (180 Grad); -MS-Transformation: Drehen (180 Grad); / * Dh 9 */ -moz -transform: drehen (180 °); / * Firefox */ -webkit -transform: rotate (180de); / * Safari und Chrom */ -O -Transformation: Drehen (180 Grad); /* Opera*/}/* Bild drehen*/Klicken Sie dann auf die Schaltfläche Schließen, die Anzeige verschwindet und der Effekt wird auf der Seite angezeigt
#fimg-min {width: 80px; Höhe: 140px; /* Bildgröße*/ Position: behoben; unten: 0px; links: 0px; /* Positionierung*/ Anzeige: Keine; /*Ausblenden*/ Cursor: Zeiger; /*Kleine Hand*/}Klicken Sie auf das im Bild eingekreiste Symbol, und die Werbung unten wird erneut angezeigt
<Script> $ (Dokument) .Ready (function () {$ (". Close"). click (function () {$ ('. footfixed'). Animate ({Höhe: '10px', Opazität: '0,4'}, "langsam", function () {$ ('. footfixed'; $ ('#fimg-min'). click (function () {$ ('. footfixed'). show (). CSS ({Höhe: '140px', Opazität: '1'});HINWEIS: Der Bildrotationseffekt der Taste -Off -Taste in Browsern unter dem IE9 konnte nicht erreicht werden.
Die obige Methode zum Schließen des Werberaums durch schwimmende Spalte am Ende des Artikels ist der gesamte Inhalt, den ich mit Ihnen teile. Ich hoffe, Sie können Ihnen eine Referenz geben und ich hoffe, Sie können wulin.com mehr unterstützen.