Efeito 1:
1. Primeiro, todo o anúncio de barra circulante inferior é fixado na parte inferior do navegador. À medida que o navegador rola, o anúncio flutuante inferior está sempre na janela do navegador. Aqui estão alguns pontos -chave: através da coluna, fixos e pretos.
Então: Primeiro de tudo, devemos dar a largura geral do anúncio da coluna flutuante 100%e, em segundo lugar, definir um posicionamento fixo, fixado na parte inferior do navegador, a cor do fundo é preta e a transparência é 0,7.
.Footfixed {Width: 100%; Altura: 140px; / * O tamanho da imagem, largura deve ser 100% */ posição: corrigido; Inferior: 0; /* Posicionamento fixo, corrigido na parte inferior do navegador. */ Antecedentes: #081628; opacidade: .7; /*Chrome, Safari, Firefox, Opera*/Filtro: Alpha (Opacity = 70);/*para IE8 e versões anteriores*/}2. A imagem do anúncio da coluna flutuante na parte inferior pode ser vista como maior que o fundo (altura do fundo: 140px, altura da imagem interna: 218px)
E o conteúdo geral é parcialmente centrado.
.fimg {altura: 218px; /*Observe que a altura da imagem aqui é superior a 140px*/ largura: 1190px; margem: 0px automático; /*O conteúdo geral está centrado*/}No entanto, como a altura do fundo suspenso em suspensão de conteúdo de publicidade Parte 218px é maior que a altura do elemento pai definido 140px, a diferença de altura é de 78px 78px
O seguinte efeito é produzido e a imagem não pode ser concluída:
Isso exige que a imagem seja movida para 78px e o posicionamento geral de toda a parte de conteúdo de publicidade flutuante na parte inferior é necessária.
.fimg {Position: relativo; /*Posicionamento relativo do elemento pai*/ topo: -78px; }resultado:
Aqui está uma pergunta:
A imagem não está muito clara por causa da transparência adicional.
Para resolver esse problema, use uma div para definir o plano de fundo em vez de definir a cor do fundo .FootFixed.
<div> </div>
.ftbj {posição: absoluto; Antecedentes:#081628; Altura: 100%; largura: 100%; topo: 0; Esquerda: 0; opacidade: .7;/*Chrome, Safari, Firefox, Opera*/Filtro: alfa (opacidade = 70);}/*para ie8 e versões anteriores*/. Footfixed {largura: 100%; Altura: 140px; / * Tamanho da imagem, largura deve ser 100% */ posição: corrigida; Inferior: 0; /*Posicionamento fixo, corrigido na parte inferior do navegador. */ Antecedentes: #081628; opacidade: .7; /*Chrome, Safari, Firefox, Opera*/Filtro: Alpha (Opacity = 70);/*para IE8 e versões anteriores*/}Dessa forma, a imagem do efeito:
Isso deixa muito mais claro.
3. O efeito do botão Fechar:
Primeiro, o botão é fixado no canto superior direito da imagem de publicidade, posicionando a imagem. O tamanho da imagem precisa ser definido, o caminho de introdução da imagem precisa ser usado para posicionar toda a parte do conteúdo de publicidade flutuante na parte inferior, e o botão Fechar é posicioná -lo absolutamente.
.fimg {Position: relativo; /*Posicionamento relativo dos elementos dos pais*/}. Fechar {largura: 33px; Altura: 33px; /* Tamanho da imagem*/Background: URL (imagens/close.png) no centro central de repetição; /*Caminho de introdução da imagem*/ Posição: Absoluto; Direita: 15px; TOP: 85px; /*Corrigido para corrigi -lo em toda a parte inferior e suspenso no canto superior direito da imagem de publicidade*/}Em segundo lugar, mova o mouse para o botão Fechar e uma mão pequena aparece e o botão fechar o botão gira.
Para produzir efeitos de animação, adicione a transição
.close {transição: .5s; Cursor: Ponteiro; /*Fixado no canto superior direito da parte inferior, posicionando*/}. Feche: Passe o mouse {transform: girate (180deg); -ms-transform: girate (180deg); / * Ou seja, 9 */ -moz -transform: girate (180deg); / * Firefox */ -webkit -transform: girtate (180deg); / * Safari e Chrome */ -o -transform: girate (180deg); /* Ópera*/}/* gire a imagem*/Em seguida, clique no botão Fechar, o anúncio desaparece e o efeito aparece no lado
#FIMG-MIN {Width: 80px; Altura: 140px; /* Tamanho da imagem*/ posição: corrigido; Inferior: 0px; Esquerda: 0px; /* Posicionamento*/ exibição: Nenhum; /*Ocultar*/ cursor: ponteiro; /*Little Hand*/}Clique no ícone circulado na foto e o anúncio na parte inferior aparece novamente
<Cript> $ (document) .ready (function () {$ (". Close"). Clique (function () {$ ('. Footfixed'). Animate ({altura: '10px', opacidade: '0.4'}, "lento", function () {$ ('. Footfixed'). hide () $ ('#fim "; $ ('#FIMG-MIN'). Clique em (function () {$ ('. Footfixed'). Show (). CSS ({Hight: '140px', Opacity: '1'}); $ ('#FIMG-min'). Hide ();});NOTA: O efeito de rotação da imagem do botão desativado nos navegadores abaixo do IE9 não conseguiu alcançar.
O método acima de fechar o espaço de publicidade por coluna flutuante na parte inferior do artigo é todo o conteúdo que compartilho com você. Espero que você possa lhe dar uma referência e espero que você possa apoiar mais o wulin.com.