skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

jQueryでメニューのマウスオーバーをかっちょよくするJavaScript「jQuery Background Position」

｜ ｜ ｜ ｜ ｜ ｜ ｜

かっちょよくシリーズ第２弾。。。
jQueryを使用してメニューのマウスオーバーを印象的にしてみます。
via：jQuery Background Position

使用方法
jQuery Background Positionからjquery.bgpos.jsをjQueryからjquery.jsをダウロードします。
次にこんな画像を用意します。

次に以下のようにjsを記述します。
<style>
ul {list-style:none;margin:0;padding:0;}
li {float:left;width:100px;line-height:25px;height:25px;margin:0;padding:0;text-align:center;}
li a {background:url(背景画像パス) repeat 0 0;display:block;padding:5px 10px;color:#FFF;text-decoration:none;border-right:1px solid #FFF;}
</style>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.bgpos.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('li a')
.css( {backgroundPosition: "-20px 35px"} ) //デフォルト時、背景画像を横-20px、縦35pxに指定。
.mouseover(function(){
$(this).stop().animate({backgroundPosition:"(-20px 94px)"}, {duration:500})
//マウスオーバー時に縦位置94pxに0.5秒かけて移動
})
.mouseout(function(){
$(this).stop().animate({backgroundPosition:"(40px 35px)"}, {duration:200, complete:function(){
//マウスアウト時に横位置40px、縦位置35pxに2秒かけて移動
$(this).css({backgroundPosition: "-20px 35px"})
//移動完了後、元の位置に戻す
}})
})
});
</script>

最後にメニュー部分を一般的な方法で記述すれば完成です。

<ul id="demo">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
; </ul>

jQueryでメニューのマウスオーバーをかっちょよくするJavaScript「jQuery Background Position」サンプル

記事作成：2009年04月23日

前の記事：マウスオーバーをかっちょよくするJavaScript「jquery-glow」
次の記事：ソースを綺麗に見せるシンタックスハイライト > 2になってたSyntaxHighlighter