تصف هذه المقالة طريقة تطبيق JS لعرض شريط الأدوات دائمًا في أسفل صفحة الويب باستخدام زر إغلاق. شاركه للرجوع إليه. التفاصيل كما يلي:
هذا رمز عملي للغاية. يضيف شريط أدوات يتم عرضه دائمًا في أسفل نافذة المتصفح. يمكنك وضع الإعلانات وجهات الاتصال وغيرها من المعلومات. يحتوي شريط أدوات هذا الرمز أيضًا على زر إغلاق ، يمكن إغلاقه في أي وقت.
انسخ الرمز على النحو التالي: <! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title> القائمة الثابتة (أعلى) </title>
<script type = "text/javaScript" src = "js/jquery1.3.2js"> </script>
<style>
Body ، H1 ، H2 ، H3 ، H4 ، H5 ، H6 ، P ، UL ، LI ، DL ، DT ، DD {Padding: 0 ؛ Margin: 0 ؛}
li {style style: none ؛} img {border: none ؛} em {font-style: normal ؛}
a {color:#555 ؛ decoration text: 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: اليسار ؛ الارتفاع: 25px ؛ تجاوز: مخفي ؛ العرض: 98 ٪ ؛ خط الارتفاع: 25px ؛ الخلفية: #fff ؛ الهامش: 0 1 ٪ ؛ الحدود:#B4B4B4 1PX الصلبة ؛ border-bottom: none ؛ z-index: 999 ؛ الموضع: ثابت ؛ القاع: 0 ؛ اليسار: 0 ؛ _position: aboort ؛/ * for ie6 */ verflow: visible ؛}
.Close {الموضع: مطلق ؛ اليمين: 5px ؛ الارتفاع: 25px ؛ العرض: 16px ؛ مستودع النص: -9999px ؛ padding-left: 10px ؛}
.Close A {background: url (../ images/201008/elief.gif) مركز عدم التكرار ؛ العرض: 16px ؛ عرض: كتلة ؛}
.bnav2 {الارتفاع: 24px ؛ خط الارتفاع: 24px ؛ الهامش: 1px ؛ Margin-Bottom: 0 ؛ الخلفية:#e5e5e5 ؛ }
.bnav .s1 {الموضع: مطلق ؛ اليسار: 10px ؛}
.bnav .s1 img {padding-top: 3px ؛ الهامش اليمين: 7px ؛}
.bnav .s2 {الموضع: absolute ؛ اليمين: 30px ؛ اللون:#888 ؛}
.bnav .s2 span {padding-right: 10px ؛}
.bnav .s2 a {margin: 0 6px ؛}
.Rolltext {الموضع: مطلق ؛ اليسار: 160px ؛ الارتفاع: 25px ؛ خط الارتفاع: 25px ؛ فائض: مخفي ؛}
.rolltext dt ، .rolltext dd {float: left ؛ width: auto ؛}
.RollText A {Display: Block ؛ الارتفاع: 25 بكسل ؛ Overflow: Hidden ؛}
.bnav3 {الارتفاع: 25px ؛ العرض: 16px ؛ خط الارتفاع: 25px ؛ الهامش: 0 1 ٪ ؛ حشو اليمين: 6px ؛ bord-bottom: none ؛ z-index: 999 ؛ الموضع: ثابت ؛ القاع: 0 ؛ اليمين: 0 ؛ _position:/ * for ie6 */_ TOP: Expression (documentElement.ScrollTop + documentElement.Clientheight-This.offseTeight) ؛ / * لـ ie6 */ verflow: مرئي ؛}
.bnav3 A {background: url (../ Images/201008/open.gif) No-Repeat Center ؛ العرض: كتلة ؛ الارتفاع: 25 بكسل ؛ العرض: 16 بكسل ؛ استولى النص: -5000px ؛}
</style>
</head>
<body>
<script type = "text/javaScript">
var closebn = $ .cookie ("bnav") ؛
if (closeBn == "0") {closenav () ؛}
دالة الموضحة () {
$ (". openclose"). Toggle () ؛
$ .cookie ("bnav" ، "1" ، {Expires: 1}) ؛
}
وظيفة Closenav () {
$ (". openclose"). Toggle () ؛
$ .cookie ("bnav" ، "0" ، {Expires: 1}) ؛
}
// تمرير واحد
وظيفة singlescroll () {
$ (". Rolltext DD"). ANIMATE ({margintop: "-25px"} ، 500 ، function () {
$ (this) .css ({margintop: "0px"}). find ("a: first"). appendto (this) ؛
}) ؛
}
$ (وثيقة). ready (function () {
setInterval ("singlescroll ()" ، 3000) ؛
}) ؛
</script>
<viv>
<viv>
<span>
<a href = "#"> <img src = "images/201008/qqonline.gif"> </a> <a href = "#"
</span>
<dl>
<dt> بيان خاص: </dt>
<dd>
<a href = "#"> خلال المهرجان المزدوج ، هناك أشخاص مخصصون في الخدمة في المركز التجاري. لا تتردد في التسوق </a>
<a href = "#"
<a href = "#"> لقد لاحظنا بشكل خاص عددًا صغيرًا من آلات السوق في هونغ كونغ وأوروبية </a>
<a href = "#"
</dd>
</dl>
<span>
<span> <a href = "#"> [login] </a> <a href = "#"> [سجل مجانًا] </a> </span> <a href = "#"> التسوق </a> | <a href = "#"
</span>
<span> <a href = "javaScript: void (0)" onClick = "Closenav ()"> إغلاق </a> </span>
</div>
</div>
<div style = "display: none ؛"> <a href = "javaScript: void (0)" onClick = "downav ()"> افتح </a> </viv>
</body>
</html>
آمل أن تكون هذه المقالة مفيدة لبرمجة JavaScript للجميع.