Cet article décrit la méthode d'implémentation de JS pour toujours afficher la barre d'outils en bas de la page Web avec un bouton Fermer. Partagez-le pour votre référence. Les détails sont les suivants:
Il s'agit d'un code très pratique. Il ajoute une barre d'outils qui est toujours affichée en bas de la fenêtre du navigateur. Vous pouvez mettre des annonces, des contacts et d'autres informations à ce sujet. La barre d'outils de ce code a également un bouton de fermeture, qui peut être fermé à tout moment.
Copiez le code comme suit: <! 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">
<adal>
<Title> Menu inférieur (en haut) </Title>
<script type = "text / javascript" src = "js / jquery1.3.2.js"> </ script>
<style>
Body, H1, H2, H3, H4, H5, H6, P, UL, Li, DL, DT, DD {rembourrage: 0; marge: 0;}
li {list-style: Aucun;} img {border: nother;} em {syle-style: normal;}
A {Color: # 555; text-décoration: Aucun; contour: aucun; blr: this.onfocus = this.blur ();}
A: Hover {Color: # 000; text-décoration: soulignement;}
Body {Font-Size: 12px; Font-Family: Arial, Verdana, Helvetica, Sans-Serif; Break-Break: Break-all; Word-Wrap: Break-Word;}
.bnav {Text-Align: Left; Height: 25px; Overflow: Hidden; Largeur: 98%; Line-Height: 25px; Background: #fff; Marge: 0 1%; bordure: # b4b4b4 1px solide; Border-Bottom: Aucun; Z-Index: 999; position: fixe; en bas: 0; gauche: 0; _Position: Absolute; / * pour IE6 * / Overflow: Visible;}
.Close {position: Absolute; droite: 5px; hauteur: 25px; largeur: 16px; text-indent: -9999px; padding-left: 10px;}
.close un {arrière-plan: URL (../ images / 201008 / close.gif) Centre sans répétition; Largeur: 16px; affichage: bloc;}
.bnav2 {hauteur: 24px; line-height: 24px; marge: 1px; marge-fond: 0; arrière-plan: # e5e5e5; }
.bnav .s1 {position: absolue; gauche: 10px;}
.bnav .s1 img {padding-top: 3px; marge-droite: 7px;}
.bnav .s2 {position: absolue; à droite: 30px; Couleur: # 888;}
.bnav .s2 Span {padding-droite: 10px;}
.bnav .s2 a {marge: 0 6px;}
.RollText {Position: Absolute; Left: 160px; hauteur: 25px; line-height: 25px; overflow: Hidden;}
.RollText DT, .RollText dd {float: gauche; largeur: auto;}
.RollText A {affichage: bloc; hauteur: 25px; débordement: caché;}
.bnav3 {hauteur: 25px; largeur: 16px; line-height: 25px; marge: 0 1%; padding-right: 6px; border-bottom: Aucun; z-index: 999; position: fixe; en bas: 0; droit: 0; _position: absolue; / * pour ie6 * / _ en haut: expression (documentElement.scrolltop + documentElement.ClientHeight-This.offsetheight); / * pour ie6 * / débordement: visible;}
.bnav3 a {Background: URL (../ images / 201008 / open.gif) Centre sans répétition; Affichage: bloc; hauteur: 25px; largeur: 16px; Texte-indent: -5000px;}
</ style>
</ head>
<body>
<script type = "text / javascript">
var closebn = $ .cookie ("bnav");
if (closebn == "0") {clôturevaV ();}
fonction wamelav () {
$ (". OpenClose"). toggle ();
$ .cookie ("bnav", "1", {expire: 1});
}
fonction closetenav () {
$ (". OpenClose"). toggle ();
$ .cookie ("bnav", "0", {expire: 1});
}
// défilement unique
fonction SingleScroll () {
$ (". RollText DD"). Animate ({margintop: "- 25px"}, 500, fonction () {
$ (this) .css ({margintop: "0px"}). trouver ("A: First"). APPENDTO (this);
});
}
$ (document) .ready (function () {
setInterval ("singlescroll ()", 3000);
});
</cript>
<div>
<div>
<span>
<a href = "#"> <img src = "images / 201008 / qqonline.gif"> </a> <a href = "#"> <img src = "images / 201008 / qqonline2.gif"> </a>
</span>
<dl>
<dt> Déclaration spéciale: </dt>
<dd>
<a href = "#"> Pendant le double festival, il y a des gens dévoués en service dans le centre commercial. N'hésitez pas à magasiner </a>
<a href = "#"> Les téléphones portables vendus par Tianyue sont des produits sous licence de Chine continentale et des produits de garantie conjointe nationale </a>
<a href = "#"> Nous avons spécialement noté un petit nombre de machines de marché de Hong Kong et européennes </a>
<a href = "#"> dieux s'il vous plaît ne posez plus de questions similaires, le numéro de téléphone du service client est sur le point d'exploser </a>
</dd>
</dl>
<span>
<span> <a href = "#"> [Login] </a> <a href = "#"> [Registre gratuitement] </a> </span> <a href = "#"> CART DE SHOP </a> | <a href = "#"> AIDE CENTER </a> | <a href = "#"> Message en ligne </a> </a>
</span>
<span> <a href = "JavaScript: void (0)" onclick = "clôturenav ()"> clôture </a> </span>
</div>
</div>
<div style = "Display: Aucun;"> <a href = "javascript: void (0)" onClick = "wakeav ()"> ouvrir </a> </div>
</docy>
</html>
J'espère que cet article sera utile à la programmation JavaScript de tous.