マウスオーバーを格好よくするJavaScript「Create a Realistic Hover Effect With jQuery」

マウスオーバーで色とか形を単純に変えるだけでは物足りないという方に。
Create a Realistic Hover Effect With jQueryは影をつけるなどリアルなエフェクトを付与できます。

sponsors

使用方法

Create a Realistic Hover Effect With jQueryからファイル一式をダウンロードします。

<link rel="stylesheet" type="text/css" href="css/screen.css" media="all" />
<script type="text/javascript" src="scripts/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="scripts/jrealistichover.js"></script>
あとは以下のようにすれば完成です。

<ul id="nav-shadow">
	<li class="button-color-1"><a href="#">Link Text</a></li>
	<li class="button-color-2"><a href="#">Link Text</a></li>
	<li class="button-color-3"><a href="#">Link Text</a></li>
	<li class="button-color-4"><a href="#">Link Text</a></li>
</ul>
影を落とす以外に、反射効果バージョンもあります。

サンプル

Javascriptサンプルページ一覧
skuare.net

sponsors