javascriptライブラリ「mootools」でリンクを目立たせるに関するコメントはまだありません。
ご遠慮なくコメントしてください。
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」













