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

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