Effet 1:
1. Premièrement, tout l'annonce à barre flottante du bas est fixée au bas du navigateur. Lorsque le navigateur défile, l'annonce flottante inférieure est toujours dans la fenêtre du navigateur. Voici quelques points clés: par colonne, fixe et noir.
Donc: tout d'abord, nous devons donner la largeur globale de la publicité à colonne flottante à 100%, et deuxièmement, régler un positionnement fixe pour lui, fixé au bas du navigateur, la couleur d'arrière-plan est noire et la transparence est de 0,7.
.footfixed {largeur: 100%; hauteur: 140px; / * La taille de l'image, la largeur doit être à 100% * / position: fixe; en bas: 0; / * Positionnement fixe, fixé au bas du navigateur. * / Background: # 081628; Opacité: .7; / * Chrome, Safari, Firefox, Opera * / Filtre: Alpha (opacité = 70); / * pour IE8 et Versions antérieures * /}2. L'image de la publicité à colonne flottante en bas peut être considérée comme plus élevée que l'arrière-plan (hauteur d'arrière-plan: 140px, hauteur de l'image intérieure: 218px)
Et le contenu global est partiellement centré.
.Fimg {hauteur: 218px; / * Notez que la hauteur de l'image ici est supérieure à 140px * / largeur: 1190px; marge: 0px automatique; / * Le contenu global est centré * /}Cependant, comme la hauteur du contenu publicitaire en suspension inférieur, partie 218px
L'effet suivant est produit et l'image ne peut pas être terminée:
Cela nécessite que l'image soit déplacée jusqu'à 78px, et le positionnement global de la partie de contenu publicitaire flottante en bas est requis.
.Fimg {position: relative; / * Elément parent Position relative * / Top: -78px; }résultat:
Voici une question:
L'image n'est pas très claire en raison de la transparence supplémentaire.
Pour résoudre ce problème, utilisez un div pour définir l'arrière-plan au lieu de définir la couleur d'arrière-plan dans .Footfixed.
<div> </div>
.ftbj {position: Absolute; Contexte: # 081628; hauteur: 100%; Largeur: 100%; en haut: 0; à gauche: 0; Opacité: .7; / * Chrome, Safari, Firefox, Opera * / Filter: Alpha (Opacity = 70);} / * pour IE8 et Versions antérieures * /. FootFixed {Width: 100%; hauteur: 140px; / * Taille d'image, la largeur doit être 100% * / position: fixe; en bas: 0; / * Positionnement fixe, fixé au bas du navigateur. * / Background: # 081628; Opacité: .7; / * Chrome, Safari, Firefox, Opera * / Filtre: Alpha (opacité = 70); / * pour IE8 et Versions antérieures * /}De cette façon, l'image de l'effet:
Cela le rend beaucoup plus clair.
3. L'effet du bouton de fermeture:
Tout d'abord, le bouton est fixé dans le coin supérieur droit de l'image publicitaire en positionnant l'image. La taille de l'image doit être définie, le chemin d'introduction de l'image doit être utilisé pour positionner toute la partie du contenu publicitaire flottant en bas, et le bouton Fermer est de le positionner absolument.
.Fimg {position: relative; / * Positionnement relatif des éléments parents * /}. Close {largeur: 33px; hauteur: 33px; / * Taille d'image * / arrière-plan: URL (images / close.png) Centre de centre sans répétition; / * Path d'introduction de l'image * / position: Absolute; À droite: 15px; En haut: 85px; / * Correction pour le réparer sur tout le bas et le coin supérieur droit en suspension de l'image publicitaire * /}Deuxièmement, déplacez la souris vers le bouton Fermer et une petite main apparaît, et le bouton de fermeture tourne.
Pour produire des effets d'animation, ajoutez la transition
.Close {Transition: .5S; curseur: pointeur; / * Fixé dans le coin supérieur droit du bas en positionnant * /}. Close: Hover {Transform: Rotate (180Deg); -ms-transform: Rotate (180deg); / * IE 9 * / -moz-transform: Rotate (180Deg); / * Firefox * / -webkit-transform: rotation (180deg); / * Safari et chrome * / -o-transform: rotation (180deg); / * Opera * /} / * Rotation Image * /Puis cliquez sur le bouton Fermer, l'annonce disparaît et l'effet apparaît sur le côté
# fimg-min {width: 80px; hauteur: 140px; / * Taille d'image * / position: fixe; En bas: 0px; gauche: 0px; / * Positionnement * / affichage: aucun; / * Masquer * / curseur: pointeur; / * Petite main * /}Cliquez sur l'icône encerclé dans l'image, et la publicité en bas apparaît à nouveau
<cript> $ (document) .ready (function () {$ (". Close"). Cliquez sur (fonction () {$ ('. FootFixed'). Animate ({hauteur: '10px', opacité: '0.4'}, "Slow", fonction () {$ ('. FootFixed'). $ ('# fimg-min'). cliquez sur (fonction () {$ ('. FootFixed'). Show (). CSS ({hauteur: '140px', opacité: '1'}); $ ('# fimg-min'). Hide ();});Remarque: L'effet de rotation de l'image du bouton éteint dans les navigateurs ci-dessous IE9 n'a pas réussi à réaliser.
La méthode ci-dessus pour fermer l'espace publicitaire par colonne flottante au bas de l'article est tout le contenu que je partage avec vous. J'espère que vous pourrez vous faire référence et j'espère que vous pourrez soutenir Wulin.com plus.