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

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

使用方法
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「Create a Realistic Hover Effect With jQuery」サンプル

sponsors

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

記事作成:
記事URL:

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