Efecto 1:
1. Primero, todo el anuncio de la barra flotante de la barra inferior se fija en la parte inferior del navegador. A medida que el navegador se desplaza, el anuncio flotante inferior siempre está en la ventana del navegador. Aquí hay algunos puntos clave: a través de la columna, fijo y negro.
Entonces: en primer lugar, debemos dar el ancho general del anuncio de la columna flotante al 100%, y en segundo lugar, establecer un posicionamiento fijo, fijado en la parte inferior del navegador, el color de fondo es negro y la transparencia es 0.7.
.footfixed {ancho: 100%; Altura: 140px; / * El tamaño de la imagen, el ancho debe ser 100% */ Posición: fijo; Abajo: 0; /* Posicionamiento fijo, fijo en la parte inferior del navegador. */ Antecedentes: #081628; Opacidad: .7; /*Chrome, Safari, Firefox, Opera*/Filter: Alpha (Opacity = 70);/*para Versiones IE8 y anteriores*/}2. La imagen del anuncio de la columna flotante en la parte inferior puede ser más alta que el fondo (altura de fondo: 140px, altura de la imagen interna: 218px)
Y el contenido general está parcialmente centrado.
.fimg {altura: 218px; /*Tenga en cuenta que la altura de la imagen aquí es superior a 140px*/ ancho: 1190px; Margen: 0px Auto; /*El contenido general está centrado*/}Sin embargo, dado que la altura del contenido publicitario suspendido inferior Parte 218px es mayor que la altura del elemento principal establecido 140px, la diferencia de altura es 78px 78px
Se produce el siguiente efecto y la imagen no se puede completar:
Esto requiere que la imagen se mueva hasta 78 px, y se requiere el posicionamiento general de toda la parte del contenido de publicidad flotante en la parte inferior.
.fimg {posición: relativo; /*Posicionamiento relativo del elemento principal*/ Top: -78px; }resultado:
Aquí hay una pregunta:
La imagen no es muy clara debido a la transparencia adicional.
Para resolver este problema, use un DIV para establecer el fondo en lugar de configurar el color de fondo en .footfixed.
<div> </div>
.ftbj {posición: absoluto; Antecedentes:#081628; Altura: 100%; Ancho: 100%; arriba: 0; Izquierda: 0; Opacidad: .7;/*Chrome, Safari, Firefox, Opera*/Filter: Alpha (Opacidad = 70);}/*Para Versiones IE8 y anteriores*/. Footfixed {Width: 100%; Altura: 140px; / * Tamaño de imagen, el ancho debe ser 100% */ Posición: fijo; Abajo: 0; /*Posicionamiento fijo, fijo en la parte inferior del navegador. */ Antecedentes: #081628; Opacidad: .7; /*Chrome, Safari, Firefox, Opera*/Filter: Alpha (Opacity = 70);/*para Versiones IE8 y anteriores*/}De esta manera, la imagen del efecto:
Esto lo hace mucho más claro.
3. El efecto del botón de cierre:
Primero, el botón se fija en la esquina superior derecha de la imagen publicitaria colocando la imagen. El tamaño de la imagen debe establecerse, la ruta de introducción de la imagen debe usarse para colocar toda la parte del contenido de publicidad flotante en la parte inferior, y el botón de cierre es colocarla absolutamente.
.fimg {posición: relativo; /*Posicionamiento relativo de los elementos principales*/}. Close {ancho: 33px; Altura: 33px; /* Tamaño de imagen*/Fondo: URL (Images/Close.png) Centro central sin repetición; /*Ruta de introducción de imagen*/ Posición: Absolute; Derecha: 15px; arriba: 85px; /*Fijo para arreglarlo en toda la esquina superior derecha y suspendida de la imagen publicitaria*/}En segundo lugar, mueva el mouse al botón de cierre, y aparece una pequeña mano, y el botón de cierre gira.
Para producir efectos de animación, agregue la transición
.close {transición: .5s; cursor: puntero; /*Fijado a la esquina superior derecha de la parte inferior colocando*/}. Close: Hover {Transform: Rotate (180deg); -ms-transform: rotar (180deg); / * Es decir, 9 */ -MOZ -Transform: Rotate (180deg); / * Firefox */ -Webkit -Transform: Rotate (180deg); / * Safari y cromo */ -o -transform: rotar (180deg); /* Ópera*/}/* Rotar la imagen*/Luego haga clic en el botón Cerrar, el anuncio desaparece y el efecto aparece en el lado
#fimg-min {ancho: 80px; Altura: 140px; /* Tamaño de imagen*/ posición: fijo; Abajo: 0px; Izquierda: 0px; /* Posicionamiento*/ pantalla: ninguno; /*Ocultar*/ cursor: puntero; /*Mano pequeña*/}Haga clic en el icono rodeado en la imagen, y el anuncio en la parte inferior aparece nuevamente
<script> $ (documento) .Ready (function () {$ (". Close"). Click (function () {$ ('. $ ('#fimg-min'). Click (function () {$ ('.Nota: El efecto de rotación de la imagen del botón de apagado en los navegadores debajo de IE9 no logró lograr.
El método anterior para cerrar el espacio de publicidad mediante la columna flotante en la parte inferior del artículo es todo el contenido que comparto con usted. Espero que pueda darle una referencia y espero que pueda apoyar más a Wulin.com.