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

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

使用方法
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」でリンクを目立たせるサンプル

sponsors

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

記事作成:
記事URL:

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