クールにロールオーバーするjavascript「flippyMOO」

マウスをロールオーバーするとコンテンツが表示される方法は数多くあります。
しかし、flippyMOOのようにクールなのも少ないでしょう。

使用方法
flippyMOOから必要ファイル一式をダウンロードします。
<link rel="stylesheet" href="http://yourdomain/flippy.css" type="text/css" media="screen">
<script src="http://yourdomain/mootools.js" type="text/javascript"></script>
<script src="http://yourdomain/flippyMOO.v1.1.js" type="text/javascript"></script>
headに上記を記述し、HTMLを以下のように書けば完成です。
<div id="flippies">
<div class="flippy_container">
<div class="flippy">
<div class="title">
<h2>最初に表示されるコンテンツ >img src="http://yourdomain/red_arrow2.gif" width="12" height="17"></h2>
</div>
<div class="body">
<p>ロールオーバー時に表示するコンテンツ</p>
</div>
</div>
</div>
</div>
またflippyMOO.v1.1.jsファイルの37行目あたりのvar _TRANSITION =を変更するとエフェクトの種類や時間を変更できます。
クールにロールオーバーするjavascript「flippyMOO」

2007年09月14日

前の記事：コードの表示を整形するjavascript「jCodeViewer」
次の記事：エフェクト満載の画像ギャラリー系javascript「jQuery Cycle Plugin」

関連記事

• [mootools]WysEditor
• 高機能な文字書き換えjavascript「class.editInPlace.js」
• テキストに影をつけるjavascript「text drop shodow」
• テキストボックスを伸縮させるjavascript「resizeTextarea」
• テキストを書き換え可能にするjavascript「inLineEdit Plugin」

• jQueryでLightBoxを実現するjavascript「jQuery Lightbox Plugin (balupton edition)」
• ビジュアル面で最高のタイムピッカーJavaScript「nogray_time_picker」
• BOMBERMAN JAVASCRIPT GAME by mootools.js
• 3ステップで表をソート＆値を検索できるjavascript「dataTables」
• Movable Type 4.2にバージョンアップ
• ページの目次を自動で作成するjavascript「jqTOC」
• JavaScriptライブラリ「raphael」で図を描く
• ニューデザイン
• Widgetboxで手軽にRSS型ウィジェット（ガジェット）を作る
• 奥から手前にズームするJavaScript「Spacegallery.js」