マウスオーバーをかっこよく見せるJavaScript「Animated Hover」

マウスオーバーを印象的にするとリンクが注目されクリックされやすくなるかもしれません。
jQueryプラグインのAnimated Hoverでは、マウスオーバーのタイミングでアニメーションを加えてくれます。
マウスオーバーをかっこよく見せるJavaScript「Animated Hover」サンプル

使用方法
Animated Hoverからjquery.ahover.jsをDimensionsからjquery.dimensions.jsをダウンロードします。
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.dimensions.min.js"></script>
<script type="text/javascript" src="jquery.ahover.js"></script>
<script language="javascript" type="text/javascript">
$(function() {
$('ul li').ahover();
});
</script>

上記ではメニューを想定し、ulのli要素に対してマウスオーバーを適用しています。
さらにCSSを記述します。
<style>
ul {list-style-type: none;position: relative;}
ul li {position: relative;z-index: 200;padding: 0 0.5em;line-height: 1.5;float: left;}
ul div.ahover {background: #ffb;padding-bottom: 10px;position:absolute;} /* ここの背景で色を変更可能です */
</style>

あとは普段通りメニューを記述すれば完成です。
<ul> <li><a href="http://www.skuare.net/">Top page</a></li>
<li><a href="http://www.skuare.net/test/index.html">JavaScript Library Samples</a></li>
<li><a href="http://www.skuare.net/test/jQuery.html">jQuery Plugin Samples</a></li>
</ul>

マウスオーバーをかっこよく見せるJavaScript「Animated Hover」サンプル
※IEでは、DOCTYPEをstrictにしないと機能しないようです。
Commented by 10th543

sponsors

「マウスオーバーをかっこよく見せるJavaScript「Animated Hover」」をシェアする

記事作成:
記事URL:

TOP > > > マウスオーバーをかっこよく見せるJavaScript「Animated Hover」