この記事では、JSを実装して、ボタンを閉じてWebページの下部に常にツールバーを表示する方法について説明します。参照のためにそれを共有してください。詳細は次のとおりです。
これは非常に実用的なコードです。ブラウザウィンドウの下部に常に表示されるツールバーを追加します。発表、連絡先、その他の情報を入力できます。このコードのツールバーには、閉じるボタンもあり、いつでも閉じることができます。
次のようにコードをコピーします。<
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>修正済みボトム（上）メニュー</title>
<script type = "text/javascript" src = "js/jquery1.3.2.js"> </scrip>
<style>
ボディ、H1、H2、H3、H4、H5、H6、P、UL、LI、DL、DT、DD {パディング：0;マージン：0;}
li {list-style：none;} img {border：none;} em {font-style：normal;}
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：left; height：25px; overflow：hidden; width：98％; line-height：25px; background：#fff;マージン：0 1％;ボーダー：＃B4B4B4 1PXソリッド; Border-Bottom：なし; Z-Index：999; position：sixt; bottom：0;左：0; _ position：absolute;/ * ie6 */ overflow：visible;}
.close {position：aspolute; right：5px; height：25px; width：16px; text-indent：-9999px; padding-left：10px;}
.close a {background：url（../ images/201008/close.gif）No-Reepeat Center;幅：16px;ディスプレイ：ブロック;}
.bnav2 {height：24px; line-height：24px;マージン：1px;マージンボトム：0;背景：＃e5e5e5; }
.bnav .s1 {位置：絶対;左：10px;}
.bnav .s1 img {padding-top：3px; margin-right：7px;}
.bnav .s2 {位置：絶対;右：30px;色：＃888;}
.bnav .2 span {padding-right：10px;}
.bnav .s2 a {マージン：0 6px;}
.rollText {position：absolute; left：160px; height：25px; line-height：25px; overflow：hidden;}
.rolltext dt、.rolltext dd {float：left; width：auto;}
.rolltext a {display：block; height：25px; overflow：hidden;}
.bnav3 {height：25px; width：16px; line-height：25px;マージン：0 1％;パディング・ライト：6px;境界線底：なし; z-index：999; position：sixt; bottom：0; right：0; _position：absolute;/ * for ie6 */_ top：documentelement.scrolltop + documentlement.clientheeight-this.offseetheigh）; / * IE6の場合 */オーバーフロー：可視;}
.bnav3 a {background：url（../ images/201008/open.gif）No-Repeat Center;表示：ブロック;高さ：25px;幅：16px;テキストインデント：-5000px;}
</style>
</head>
<body>
<script type = "text/javascript">
var closebn = $ .cookie（ "bnav"）;
if（closebn == "0"）{closenav（）;}
関数shownav（）{
$（ "。openclose"）。toggle（）;
$ .cookie（ "bnav"、 "1"、{expires：1}）;
}
関数closenav（）{
$（ "。openclose"）。toggle（）;
$ .cookie（ "bnav"、 "0"、{expires：1}）;
}
//シングルスクロール
functionsinglescroll（）{
$（ "。rolltext dd"）。animate（{margintop： "-25px"}、500、function（）{
$（this）.css（{margintop： "0px"}）。find（ "a：first"）。
}）;
}
$（document）.ready（function（）{
setInterval（ "Singlescroll（）"、3000）;
}）;
</script>
<div>
<div>
<span>
<a href = "＃"> <img src = "images/201008/qqonline.gif"> </a> <a href = "＃"> <img src = "images/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 = "＃"> [login] </a> <a href = "＃"> [無料で登録] </a> </span> <a href = "＃">ショッピングカート</a> | <a href = "> help center </a> | <a href ="
</span>
<span> <a href = "javascript：void（0）" onclick = "closenav（）"> close </a> </span>
</div>
</div>
<div style = "display：none;"> <a href = "javascript：void（0）" onclick = "shownav（）"> open </a> </div>
</body>
</html>
この記事がみんなのJavaScriptプログラミングに役立つことを願っています。