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

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

使用方法
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を大きくします。
javascriptライブラリ「mootools」でリンクを目立たせるサンプル

2008年02月04日

前の記事：div要素もリンクにするjavascript「jquery.biggerlink」
次の記事：CMSツール「Movable Type」を使いこなすためのサイト25

関連記事

• セクシーなLightBoxを実現するJavaScript「Sexy LightBox」
• ビジュアル面で最高のタイムピッカーJavaScript「nogray_time_picker」
• BOMBERMAN JAVASCRIPT GAME by mootools.js
• [mootools]mooVRotatingMenu
• 画面遷移せずにブックマークできるウィジェット「mooSocialize」

• ファイルサイズをJavaScriptライブラリ「jQuery」で自動表示する「addSizes.js」
• JavaScriptライブラリ「jQuery」を使用してフォームを華麗に彩る「jqTransform」
• Webカラーに関するサイト21
• 英字新聞ぽいコラムをJavaScriptライブラリ「jQuery」で作る「Columnizer」
• 心地よく要素を切り替えるJavaScript「jFlip」
• CoverFlowを実現するJavaScript「JS Coverflow」
• 画像を丸く輝かせるJavaScript「sphere.js」
• セクシーなLightBoxを実現するJavaScript「Sexy LightBox」
• JavaScriptライブラリ「jQuery」を使ってカレンダーを作る「jCal.js」
• カバーフローぽい画像ギャラリーJavaScript「ProtoFlow」