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

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

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

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

html コード

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

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

>< /div>

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

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

• 
  
  
  

  
  
  • 580 Readers
  
  
  • [Subscribe]
  
  

  
  
  
  


• 
  
  
  

  
  
  • Share Page
  
  
  • | Profile
  
  

  
  
  
  


• 
  
  
  

  
  
  • ReTweet
  
  
  • | Profile
  
  

  
  
  
  


• 
  
  
  

  
  
  • Bookmark
  
  
  • | Profile
  
  

  
  
  
  


• 
  
  
  

  
  
  • Digg
  
  
  • | Profile
  
  

  
  
  
  


• 
  
  
  

  
  
  • Stumble
  
  
  • | Profile
  
  

  
  
  
  

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 の実行方法が完了しました。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：この例の詳細な説明と動作原理については、JavaScript_基礎知識で学習してください。次の記事：この例の詳細な説明と動作原理については、JavaScript_基礎知識で学習してください。

関連記事

続きを見る

• Bootstrap リスト グループ コンポーネントの詳細な分析
• JavaScript関数のカリー化の詳細説明
• JS パスワードの生成と強度検出の完全な例 (デモ ソース コードのダウンロード付き)
• Angularjs は WeChat UI (weui) を統合します
• JavaScript を使用して繁体字中国語と簡体字中国語をすばやく切り替える方法と、簡体字中国語と繁体字中国語の切り替えをサポートする Web サイトのトリック_javascript スキル

福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！

私たちについて免責事項Sitemap

© php.cn All rights reserved