skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

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