Este artigo descreve o método de implementar o JS para sempre exibir a barra de ferramentas na parte inferior da página da web com um botão de fechamento. Compartilhe para sua referência. Os detalhes são os seguintes:
Este é um código muito prático. Ele adiciona uma barra de ferramentas que é sempre exibida na parte inferior da janela do navegador. Você pode colocar anúncios, contatos e outras informações sobre ele. A barra de ferramentas deste código também possui um botão de fechamento, que pode ser fechado a qualquer momento.
Copie o código da seguinte forma: <! Doctype html public "-// w3c // dtd xhtml 1.0 transitória // pt" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<título> Menu de fundo corrigido (em cima) </ititle>
<script type = "text/javascript" src = "js/jQuery1.3.2.js"> </script>
<estilo>
corpo, H1, H2, H3, H4, H5, H6, P, Ul, Li, Dl, Dt, Dd {Padding: 0; Margin: 0;}
Li {estilo de listar: nenhum;} img {borda: nenhum;} em {estilo de fonte: normal;}
a {cor:#555; decoração de texto: nenhum; esboço: nenhum; blr: this.onfocus = this.blur ();}
A: Hover {color:#000; decoração de texto: sublinhado;}
Corpo {Size de fonte: 12px; Font-Family: Arial, Verdana, Helvetica, Sans-Serif; Word-Break: Break-All; Word-Wrap: Break-Word;}
.bnav {text-align: esquerda; altura: 25px; estouro: oculto; largura: 98%; altura da linha: 25px; fundo: #fff; margem: 0 1%; borda:#b4b4b4 1px sólido; fundo da borda: Nenhum; Z-Index: 999; Posição: Fixo; Interior: 0; Esquerda: 0; _Position: Absolute;/ * para IE6 */ Overflow: visível;}
.close {posição: absoluto; direita: 5px; altura: 25px; largura: 16px; text-indent: -9999px; preenchimento-left: 10px;}
.close a {Background: url (../ imagens/201008/close.gif) no centro de repetição; Largura: 16px; Display: Block;}
.bnav2 {altura: 24px; altura da linha: 24px; margem: 1px; Margin-Bottom: 0; Background:#E5E5E5; }
.bnav .s1 {posição: absoluto; esquerda: 10px;}
.bnav .s1 img {tapdding-top: 3px; margem-direita: 7px;}
.bnav .s2 {posição: absoluto; direita: 30px; Cor:#888;}
.bnav .s2 span {padding-right: 10px;}
.bnav .s2 a {margem: 0 6px;}
.RollText {Posição: Absolute; esquerda: 160px; altura: 25px; altura da linha: 25px; estouro: hidden;}
.RollText dt, .rollText dd {float: esquerda; largura: auto;}
.RollText a {Display: Block; Hight: 25px; Overflow: Hidden;}
.bnav3 {altura: 25px; largura: 16px; altura da linha: 25px; margem: 0 1%; Potding-Right: 6px; Border-Bottom: Nenhum; Z-Index: 999; Posição: Fixed; inferior: 0; direita: 0; _Position: Absolute;/ * para ie6 */_ top: expressão (documentElement.scrolltop + documentElement.clientHeight-this.offSethEight); / * para ie6 */ overflow: visível;}
.bnav3 a {background: url (../ imagens/201008/open.gif) no centro de repetição; Exibição: bloco; altura: 25px; largura: 16px; Indente de texto: -5000px;}
</style>
</head>
<Body>
<script type = "text/javascript">
var closebn = $ .cookie ("bnav");
if (closebn == "0") {roseNav ();}
função mostradav () {
$ (". OpenClose"). Toggle ();
$ .cookie ("bnav", "1", {expira: 1});
}
função fecheNav () {
$ (". OpenClose"). Toggle ();
$ .cookie ("bnav", "0", {expira: 1});
}
// rolagem única
função singlescroll () {
$ (". rollText dd"). Animate ({margintop: "-25px"}, 500, function () {
$ (this) .css ({margintop: "0px"}). encontre ("a: primeiro"). Appendto (this);
});
}
$ (document) .ready (function () {
setInterval ("singlescroll ()", 3000);
});
</script>
<div>
<div>
<pan>
<a href = "#"> <img src = "imagens/201008/qqonline.gif"> </a>
</span>
<Dl>
<dt> Declaração especial: </dt>
<DD>
<a href = "#"> Durante o festival duplo, há pessoas dedicadas de plantão no shopping. Por favor, sinta -se à vontade para comprar </a>
<a href = "#"> Os telefones celulares vendidos por Tianyue são produtos licenciados da China continental e produtos nacionais de garantia conjunta </a>
<a href = "#"> Observamos especialmente um pequeno número de máquinas de Hong Kong e europeu </a>
<a href = "#"> Deuses, por favor, não faça mais perguntas semelhantes, o número de telefone do atendimento ao cliente está prestes a explodir </a>
</dd>
</dl>
<pan>
<mpan> <a href = "#"> [login] </a> <a href = "#"> [registre -se gratuitamente] </a> </span> <a href = "#"> carrinho de compras </a> | <a href = "#"> Centro de ajuda </a> <a href = "#"> online
</span>
<mpan> <a href = "javascript: void (0)" onclick = "closeNav ()"> feche </a> </span>
</div>
</div>
<div style = "display: none;"> <a href = "javascript: void (0)" onclick = "mostrouv ()"> aberto </a> </div>
</body>
</html>
Espero que este artigo seja útil para a programação JavaScript de todos.