บทความนี้อธิบายวิธีการใช้ JS เพื่อแสดงแถบเครื่องมือที่ด้านล่างของหน้าเว็บด้วยปุ่มปิดเสมอ แบ่งปันสำหรับการอ้างอิงของคุณ รายละเอียดมีดังนี้:
นี่เป็นรหัสที่ใช้งานได้จริงมาก มันเพิ่มแถบเครื่องมือที่แสดงอยู่ที่ด้านล่างของหน้าต่างเบราว์เซอร์เสมอ คุณสามารถวางประกาศผู้ติดต่อและข้อมูลอื่น ๆ ได้ แถบเครื่องมือของรหัสนี้ยังมีปุ่มปิดซึ่งสามารถปิดได้ตลอดเวลา
คัดลอกรหัสดังนี้: <! 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">
<head>
<tite> เมนูคงที่ด้านล่าง (บนสุด) </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 {Padding: 0; margin: 0;}
li {list-style: none;} img {border: none;} em {รูปแบบตัวอักษร: ปกติ;}
A {color:#555; การตกแต่งข้อความ: ไม่มี; โครงร่าง: ไม่มี; blr: this.onfocus = this.blur ();}
A: Hover {color:#000; การตกแต่งข้อความ: ขีดเส้นใต้;}
Body {Font-Size: 12px; Font-Family: Arial, Verdana, Helvetica, Sans-Serif; Word-break: break-all; word-wrap: break-word;}
.BNAV {TEXT-ALIGN: ซ้าย; ความสูง: 25PX; Overflow: Hidden; Width: 98%; Line-Height: 25px; พื้นหลัง: #FFF; มาร์จิ้น: 0 1%; ชายแดน:#B4B4B4 1px Solid; ขอบด้านล่าง: ไม่มี; z-index: 999; ตำแหน่ง: แก้ไข; ด้านล่าง: 0; ซ้าย: 0; _position: Absolute;/ * สำหรับ IE6 */ overflow: มองเห็นได้;}
.close {ตำแหน่ง: Absolute; ขวา: 5px; ความสูง: 25px; ความกว้าง: 16px; Indent-Indent: -99999px; Padding-Left: 10px;}
.close a {พื้นหลัง: url (../ images/201008/close.gif) ศูนย์กลางที่ไม่มีการทำซ้ำ; ความกว้าง: 16px; display: block;}
.BNAV2 {ความสูง: 24px; จุดสูง: 24px; มาร์จิ้น: 1px; มาร์จิ้น-ก้น: 0; พื้นหลัง:#E5E5E5; -
.Bnav .S1 {ตำแหน่ง: สัมบูรณ์; ซ้าย: 10px;}
.BNAV .S1 IMG {PADDING-TOP: 3PX; MARGIN-RIGHT: 7PX;}
.Bnav .S2 {ตำแหน่ง: สัมบูรณ์; ขวา: 30px; สี:#888;}
.BNAV .S2 Span {Padding-Right: 10px;}
.Bnav .S2 A {margin: 0 6px;}
.rolltext {ตำแหน่ง: Absolute; ซ้าย: 160px; ความสูง: 25px; สายไฟ: 25px; ล้น: ซ่อน;}
.rolltext dt, .rolltext dd {float: left; width: auto;}
.rolltext a {display: block; ความสูง: 25px; overflow: hidden;}
.BNAV3 {ความสูง: 25px; ความกว้าง: 16px; จุดสูง: 25px; มาร์จิ้น: 0 1%; Padding-Right: 6px; ขอบด้านล่าง: ไม่มี; z-index: 999; ตำแหน่ง: คงที่; ด้านล่าง: 0; ขวา: 0; _position: Absolute;/ * สำหรับ IE6 */_ TOP: Expression (DocumentElement.scrolltop + Documentelement / * สำหรับ IE6 */ overflow: มองเห็น;}
.bnav3 a {พื้นหลัง: url (../ images/201008/open.gif) ศูนย์การทำซ้ำ จอแสดงผล: บล็อก; ความสูง: 25px; ความกว้าง: 16px; Indentent: -5000px;}
</style>
</head>
<body>
<script type = "text/javascript">
var closeBn = $ .COOKIE ("BNAV");
if (closebn == "0") {closenav ();}
ฟังก์ชั่นที่แสดง () {
$ (". openclose"). toggle ();
$ .COOKIE ("BNAV", "1", {หมดอายุ: 1});
-
ฟังก์ชั่น closenav () {
$ (". openclose"). toggle ();
$ .COOKIE ("BNAV", "0", {หมดอายุ: 1});
-
// การเลื่อนเดี่ยว
ฟังก์ชั่น singlescroll () {
$ (". rolltext dd"). animate ({margintop: "-25px"}, 500, function () {
$ (นี่) .css ({Margintop: "0px"}) ค้นหา ("A: First"). ภาคผนวก (นี่);
-
-
$ (เอกสาร) .ready (function () {
setInterval ("SinglesCroll ()", 3000);
-
</script>
<div>
<div>
<span>
<a href = "#"> <img src = "images/201008/qqonline.gif"> </a> <a href = "#"> <img src = "ภาพ/201008/qqonline2.gif"> </a>
</span>
<Dl>
<dt> คำสั่งพิเศษ: </dt>
<Dd>
<a href = "#"> ในช่วงเทศกาลคู่มีคนทุ่มเทในการปฏิบัติหน้าที่ในห้างสรรพสินค้า โปรดอย่าลังเลที่จะซื้อสินค้า </a>
<a href = "#"> โทรศัพท์มือถือที่ขายโดย Tianyue เป็นสินค้าที่ได้รับใบอนุญาตจากจีนแผ่นดินใหญ่และผลิตภัณฑ์รับประกันร่วมกันแห่งชาติ </a>
<a href = "#"> เราได้สังเกตเครื่องจักรตลาดฮ่องกงและเครื่องจักรตลาดยุโรปเป็นพิเศษ </a>
<a href = "#"> พระเจ้าโปรดอย่าถามคำถามที่คล้ายกันอีกต่อไปหมายเลขโทรศัพท์บริการลูกค้ากำลังจะระเบิด </a>
</dd>
</dl>
<span>
<span> <a href = "#"> [เข้าสู่ระบบ] </a> <a href = "#"> [ลงทะเบียนฟรี] </a> </span> <a href = "#"> ตะกร้าสินค้า </a> | <a href = "#"> ศูนย์ช่วยเหลือ </a>
</span>
<span> <a href = "javascript: void (0)" onclick = "closenav ()"> ปิด </a> </span>
</div>
</div>
<div style = "display: none;"> <a href = "JavaScript: void (0)" onclick = "sofelnedav ()"> เปิด </a> </div>
</body>
</html>
ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรม JavaScript ของทุกคน