Este artículo describe el método de implementación de JS para mostrar siempre la barra de herramientas en la parte inferior de la página web con un botón de cierre. Compártelo para su referencia. Los detalles son los siguientes:
Este es un código muy práctico. Agrega una barra de herramientas que siempre se muestra en la parte inferior de la ventana del navegador. Puede poner anuncios, contactos y otra información al respecto. La barra de herramientas de este código también tiene un botón de cierre, que se puede cerrar en cualquier momento.
Copie el código de la siguiente manera: <! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1 transitional.dtd"> ">
<html xmlns = "http://www.w3.org/1999/xhtml">
<Evista>
<title> menú de fondo fijo (arriba) </title>
<script type = "text/javaScript" src = "js/jQuery1.3.2.js"> </script>
<estilo>
Body, H1, H2, H3, H4, H5, H6, P, UL, Li, DL, DT, DD {Padding: 0; Margen: 0;}
li {list-style: none;} img {border: none;} em {font-style: normal;}
A {Color:#555; Text-Decoration: Ninguno; Esquema: Ninguno; Blr: this.onfocus = this.blur ();}
A: Hover {color:#000; Decoración de texto: Underline;}
Cuerpo {Font-Size: 12px; Font-Family: Arial, Verdana, Helvetica, Sans-Serif; Word Break: Break-All; Word-Wrap: Break-Word;}
.bnav {text-align: izquierda; altura: 25px; desbordamiento: oculto; ancho: 98%; línea de línea: 25px; fondo: #fff; margen: 0 1%; borde:#b4b4b4 1px sólido; Border-Bottom: Ninguno; Index Z: 999; Posición: fijo; abajo: 0; izquierda: 0; _Position: Absolute;/ * para IE6 */ Overflow: Visible;}
.Close {posición: absoluto; derecha: 5px; altura: 25px; ancho: 16px; text-indent: -99999px; relleno-izquierda: 10px;}
.Clase a {fondo: url (../ imágenes/201008/cerrador.gif) sin repetir centro; Ancho: 16px; Display: Block;}
.bnav2 {altura: 24px; line-height: 24px; margen: 1px; Botón de margen: 0; Antecedentes:#E5E5E5; }
.bnav .s1 {posición: absoluto; izquierda: 10px;}
.bnav .S1 img {Padding-top: 3px; margin-derecha: 7px;}
.bnav .s2 {posición: absoluto; derecho: 30px; Color:#888;}
.bnav .s2 span {Padding-right: 10px;}
.bnav .s2 a {margen: 0 6px;}
.rollText {posición: absoluto; izquierda: 160px; altura: 25px; línea-aguja: 25px; desbordamiento: oculto;}
.rollText dt, .rollText dd {float: izquierda; ancho: auto;}
.rollText a {pantalla: bloque; altura: 25px; desbordamiento: oculto;}
.bnav3 {altura: 25px; ancho: 16px; line-height: 25px; margen: 0 1%; Right-right: 6px; Border-Bottom: Ninguno; Z-Index: 999; Posición: fijo; abajo: 0; Derecha: 0; _Position: Absolte;/ * para IE6 */_ Top: Expression (DocumentEelement.ScrollTop + DocumentEelement.ClientHeight-This.OffsEthEight); / * para IE6 */ Overflow: Visible;}
.bnav3 a {fondo: url (../ images/201008/abre.gif) sin repetir centro; pantalla: bloque; altura: 25px; ancho: 16px; Text-Indent: -5000px;}
</style>
</ablo>
<Body>
<script type = "text/javaScript">
var closebn = $ .cookie ("bnav");
if (closeBn == "0") {CloseNav ();}
función mostrada
$ (". OpenClose"). Toggle ();
$ .cookie ("bnav", "1", {expire: 1});
}
function CloseNav () {
$ (". OpenClose"). Toggle ();
$ .cookie ("bnav", "0", {expire: 1});
}
// desplazamiento único
function singlescroll () {
$ (". RollText DD"). Animate ({MargIntop: "-25px"}, 500, function () {
$ (this) .css ({margintop: "0px"}). Find ("a: primero"). appendTo (this);
});
}
$ (documento) .Ready (function () {
setInterval ("SinglesCroll ()", 3000);
});
</script>
<div>
<div>
<span>
<a href = "#"> <img src = "imágenes/201008/qqonline.gif"> </a> <a href = "#"> <img src = "imágenes/201008/qqonline2.gif"> </a>
</span>
<dl>
<dt> declaración especial: </dt>
<dd>
<a href = "#"> Durante el doble festival, hay personas dedicadas de servicio en el centro comercial. No dude en comprar </a>
<a href = "#"> Los teléfonos móviles vendidos por Tianyue son productos con licencia de China continental y productos de garantía conjunta nacional </a>
<a href = "#"> Hemos observado especialmente un pequeño número de máquinas de mercado europeas de Hong Kong y europeas </a>
<a href = "#"> dioses por favor no hagan preguntas similares, el número de teléfono del servicio al cliente está a punto de explotar </a>
</dd>
</dl>
<span>
<span> <a href = "#"> [Login] </a> <a href = "#"> [Regístrese gratis] </a> </span> <a href = "#"> carro de compras </a> | <a href = "#"> Centro de ayuda </a> | <a href = "#"> Mensaje en línea </a> </a>
</span>
<span> <a href = "javaScript: void (0)" onClick = "Closenav ()"> Close </a> </span>
</div>
</div>
<div style = "Display: None;"> <a href = "javascript: void (0)" onClick = "Showsav ()"> Open </a> </div>
</body>
</html>
Espero que este artículo sea útil para la programación de JavaScript de todos.