javascriptライブラリ「mootools」でリンクを目立たせる

メニューなどリンクを張っているテキストは出来れば目立たせたいです。
CSSでa:hoverで変化を付け加えることが出来ますが、できればもう少しという欲張りな方へ。
javascriptライブラリ「mootools」でリンクを目立たせる方法を紹介します。
via : Sample Nav Bar

sponsors

使用方法

mootoolsからmootools.jsをダウンロードします。
head内にmootools.jsと以下を書き込みます。
<script type="text/javascript" src="http://yourdomain/mootools.js"></script>
<script type="text/javascript">
window.addEvent('load', function () 
{
	$('demo').getChildren().each(function(el){	//navの部分は適用させるid名
		var effect = el.effect('font-size',  
		{ 
			duration: 400,	//早さ
			transition: Fx.Transitions.Expo.easeOut,	//エフェクト
			wait: false
		});
		el.orgSize = el.getStyle('font-size').toInt();  
		el.addEvents(  
		{
			'mouseover': function ()
			{
				effect.start(el.orgSize * 5);	//デフォルトのN倍
			},
			'mouseout': function ()
			{
				effect.start(el.orgSize);
			}
		});
	});
});
</script>
そして最後にリンクをid以下名に書きます。
<div id="demo">
<a href="#">Link</a>
</div>

*リンクだけではなく、スクリプト内で使用したid名以下の要素全てのfont-sizeを大きくします。

サンプル

でもでもでもLinkです。ほらLinkです。
Linkが大きくなります。

ここはpです

sponsors

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