jqueryツールバーとWebページのフローティングtoolbar_jqueryの具体的な実装コード-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

jqueryツールバーとWebページのフローティングtoolbar_jqueryの具体的な実装コード

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 05:04 PM

jquery

ツールバーとWebページのフローティングツールバーのjQuery実装方法 jQueryの実装方法
/*
基本構造index.phpチュートリアルのHTMLコードとニュースネットワークstyle.cssチュートリアルのCSSコードを更新します。

固定パネル (ID ツールバーグループ付き) と 2 つのフローティングアスペクトを作成しました。これらは、アイコンとツールヒントのバブル (左)、クイックメニュー、および「非表示ボタン」リストを含む 2 番目のステップで追加します。 " (非表示のツールバーに追加)。
パネルが非表示になっているときに再アクティブ化したい場合に便利な「表示ボタン」も期待できます。このため、id がtoolbarbut の div タグを追加します。

HTML および CSS コード
ここでは、Web ページの基本構造を示します。

html コード

コードをコピーコードは次のとおりです:

< ;div id =”ツールバーバット”>

コードをコピーします>
コードは次のとおりです:

div#toolbar, div#toolbarbut {
position:fixed; /* バーの固定位置を設定します */

bottom: 0px ; right: 0px; z-index: 9999; /* バーを上部に維持します */ height: 36px; /* CSS3 */ -moz-border-radius-topleft: 8px; -khtml-border-radius-topleft: 8px; 🎜>-moz-border-radius-topright: 8px;

-khtml-border-radius-topright: 8px;

-webkit-border-top-right-radius: 8px; -shadow: 0px 1px 10px #666, inset 1px 1px 0px #a4a4a4; /* inset はインナーシャドウを作成します */
-khtml-box-shadow: 0px 1px 10px #666;シャドウ: 0px 1px 10px # 666;
/* CSS3 終了 */
ボーダートップ: 1px ソリッド #eee;
ボーダー左: 1px ソリッド #eee; #eee;
}

div#toolbar {
width: 85%;
min-width: 700px; /* ウィンドウのサイズが大きくなりすぎる場合に幅を制限します */
margin: 0px auto ; /* 中央揃えのツールバー */
left: 0px;
}

div#toolbar {
border: none; (a:hover {border -bottom: 1px dotted #666;}) News Aggregator のボーダー */
}

div#toolbarbut { /* 「ステータスを隠す」ための div */
幅: 60ピクセル;
高さ: 15ピクセル;
表示: なし;

.leftside {
左; 🎜>}

.rightside {
float: right;
}

表示/非表示ボタンこれで、「表示ボタン」にコードを追加できます。

コードをコピー

コードは次のとおりです:

バーを表示 div>

次のプロパティは CSS クラスに関連します。

コードをコピー

コードは次のとおりです。 span.showbar a { /* ボタンを表示*/ padding: 5px; font-size: 10px;

color: #989898;

} 

右側は次のようになります。 add " 「非表示ボタン」は、図に示すように、ID を持つ右側のパーティションにあります。

コードをコピーコードは次のとおりです:

 🎜>
 
css

コードをコピー

コードは次のとおりです:

 
span.downarr { /* ボタンを非表示にする */ 
float: right; 
border-left: 1px Solid 
} 

span.downarr a { 
表示: ブロック; 
幅: 36px; 
パディング: 25px 0 0 10px; 
背景: url(images/downarrow.png) 繰り返しなし
} 

 

jQuery を使用した効果の表示/非表示まず、jQuery をダウンロードし (適切なフォルダーにコピー)、ヘッダーのindex.php タグをアクティブにする必要があります。

コードをコピーしますコードは次のとおりです。

!– … –>

コードをコピーコードは次のとおりです:

これで、HTML と CSS コードの左側にあるバー

を非表示にしたり表示したりできるようになります。
次の XHTML コードでインデックスを更新します。プレーンの順序なしリスト (ID がソーシャル) を追加してアイコンの順序を作成し、DIV タグ (クラス Dip を持つ) を合計リスト内に追加して、ツールヒントのバブル内にタグのネストを実装します。

コードをコピーコードは次のとおりです:

html

css代码

*– 左側 –*/

ul#social li {
display: inline;
}

a.rss {
display: inline-block;
幅: 104px;
高さ: 35px;
マージン左: 5px;
背景: url(images/rss.png) 繰り返しなし;
}

a.facebook、a.twitter、a.digg、a.delicious、a.stumble {
display: inline-block;
幅: 40px;
高さ: 35px;
マージントップ: 1px;
}

a.rss:hover、a.facebook:hover、a.twitter:hover、a.digg:hover、a.delicious:hover、a.stumble:hover {
background -位置: 1ピクセル 1ピクセル; /* 単純な CSS ホバー効果 */
}

a.facebook {
background: url(images/facebook.png) no-repeat;
}

a.twitter {
背景: url(images/twitter.png) 繰り返しなし;
}

a.delicious {
background: url(images/delicious.png) no-repeat;
}

a.digg {
背景: url(images/digg.png) 繰り返しなし;
}

a.stumble {
background: url(images/stumble.png) no-repeat;
}

.tip {
位置: 絶対; /* 重要 */
トップ: -75px;
幅: 250px;
高さ: 78px;
背景: url(images/tip.png) 繰り返しなし;
フロート: 左;
表示: なし。
}

/* アイコンのカスタム距離 */
#tipfacebook {
left: 75px;
}

#tiptwitter {
左: 120px;
}

#tipdelicious {
左: 165px;
}

#tipdigg {
左: 210px;
}

#tipstumble {
左: 255px;
}

.tip ul {
パディング: 22px 0 0 25px;
}

.tip ul li {
display: inline;
パディング左: 3px;
}

.tip ul li a {
font-size: 18px;
カラー: #989898;
}

.tip ul li a:hover {
color: #666;
}

.tip ul li small {
font-size: 10px;
}

jquery代码

//マウスがリスト要素上に移動したときにツールチップを表示
$(“ul#social li”).hover(function() {
$(this).find(“div”).fadeIn(“fast”).show(); //IE 用に「show()」を追加
$(this).mouseleave(function () { // マウスが要素から離れたときにツールチップを非表示にする
$(this).find(“div”).hide()
});

わかりました。私たちの jQuery ツールバーとネットワーク浮動ツール条 jQuery の実行方法が完了しました。