Artikel ini menjelaskan metode menerapkan JS untuk selalu menampilkan bilah alat di bagian bawah halaman web dengan tombol tutup. Bagikan untuk referensi Anda. Dengan rincian sebagai berikut:
Ini adalah kode yang sangat praktis. Ini menambahkan bilah alat yang selalu ditampilkan di bagian bawah jendela browser. Anda dapat menempatkan pengumuman, kontak, dan informasi lainnya di dalamnya. Toolbar kode ini juga memiliki tombol tutup, yang dapat ditutup kapan saja.
Salin kode sebagai berikut: <! Doctype html public "-// w3c // dtd xhtml 1.0 transisi // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title> Menu Fixed Bottom (Top) </iteme>
<type skrip = "Text/JavaScript" src = "js/jQuery1.3.2.js"> </script>
<tyle>
Tubuh, H1, H2, H3, H4, H5, H6, P, Ul, Li, DL, DT, DD {Padding: 0; Margin: 0;}
Li {List-style: none;} img {border: none;} em {font-style: normal;}
A {Color:#555; Text-Decoration: None; Outline: None; BLR: this.onfocus = this.blur ();}
A: Hover {Color:#000; Text-Decoration: Underline;}
Body {font-size: 12px; font-family: Arial, Verdana, Helvetica, sans-serif; Word-Break: Break-all; Word-Wrap: Break-word;}
.bnav {text-align: kiri; tinggi: 25px; overflow: tersembunyi; lebar: 98%; garis-line-height: 25px; latar belakang: #fff; Margin: 0 1%; Border:#B4B4B4 1PX SOLID; Border-Bottom: Tidak ada; z-index: 999; Posisi: diperbaiki; bawah: 0; kiri: 0; _posisi: absolute;/ * untuk ie6 */ overflow: visible;}
.close {position: absolute; kanan: 5px; tinggi: 25px; lebar: 16px; Text-Indent: -9999px; Padding-left: 10px;}
.close a {latar belakang: url (../ gambar/201008/close.gif) no-rePeat center; Lebar: 16px; tampilan: blok;}
.bnav2 {height: 24px; line-height: 24px; margin: 1px; margin-bottom: 0; latar belakang:#e5e5e5; }
.bnav .s1 {position: absolute; kiri: 10px;}
.bnav .s1 img {padding-top: 3px; margin-right: 7px;}
.bnav .s2 {position: absolute; kanan: 30px; Warna:#888;}
.bnav .s2 span {padding-right: 10px;}
.bnav .s2 a {margin: 0 6px;}
.rollText {position: absolute; kiri: 160px; tinggi: 25px; line-height: 25px; overflow: tersembunyi;}
.rollText dt, .rollText dd {float: left; width: auto;}
.rollText a {display: block; tinggi: 25px; overflow: tersembunyi;}
.bnav3 {Height: 25px; lebar: 16px; garis-tinggi: 25px; Margin: 0 1%; Padding-Right: 6px; Border-Bottom: None; Z-Index: 999; Posisi: Tetap; Bawah: 0; Kanan: 0; _Posisi: Absolute;/ * untuk IE6 */_ TOP: Ekspresi (DocumentElement.Scrolltop + DocumentElement.ClientHeight-This-Thissetheight); / * untuk IE6 */ overflow: visible;}
.bnav3 a {latar belakang: url (../ gambar/201008/open.gif) no-repeat center; Tampilan: Blok; Tinggi: 25px; Lebar: 16px; Text-Indent: -5000px;}
</tyle>
</head>
<body>
<type skrip = "Teks/JavaScript">
var closeBn = $ .cookie ("bnav");
if (closeBn == "0") {closeenav ();}
fungsi ditampilkan () {
$ (". OpenClose"). Toggle ();
$ .cookie ("bnav", "1", {kedaluwarsa: 1});
}
function closeenav () {
$ (". OpenClose"). Toggle ();
$ .cookie ("bnav", "0", {kedaluwarsa: 1});
}
// Gulir tunggal
fungsi singlescroll () {
$ (". RollText dd"). animate ({margintop: "-25px"}, 500, function () {
$ (this) .css ({margintop: "0px"}). find ("a: first"). appendto (this);
});
}
$ (dokumen) .ready (function () {
setInterval ("SinglesCroll ()", 3000);
});
</script>
<div>
<div>
<span>
<a href = "#"> <img src = "gambar/201008/qqonline.gif"> </a> <a href = "#"> <img src = "gambar/201008/qqonline2.gif"> </a>
</span>
<dl>
<dt> Pernyataan Khusus: </dt>
<dd>
<a href = "#"> Selama festival ganda, ada orang yang berdedikasi yang bertugas di mal. Silakan berbelanja </a>
<a href = "#"> Ponsel yang dijual oleh Tianyue adalah barang berlisensi dari daratan Cina dan produk jaminan gabungan nasional </a>
<a href = "#"> Kami secara khusus mencatat sejumlah kecil mesin pasar Hong Kong dan Eropa </a>
<a href = "#"> dewa tolong jangan ajukan pertanyaan serupa lagi, nomor telepon layanan pelanggan akan meledak </a>
</dd>
</ll>
<span>
<span> <a href = "#"> [login] </a> <a href = "#"> [Daftarkan gratis] </a> </span> <a href = "#"> keranjang belanja </a> | <a href = "#"> Pusat Bantuan </a> | <a href = "#"> pesan online </a> </a> </a>
</span>
<span> <a href = "javascript: void (0)" onclick = "closeenav ()"> tutup </a> </span>
</div>
</div>
<div style = "display: none;"> <a href = "javascript: void (0)" ontClick = "showAv ()"> Buka </a> </div>
</body>
</html>
Saya harap artikel ini akan membantu pemrograman JavaScript semua orang.