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

mootoolsで複数エレメントを操作する「Fx.Presets」

｜ ｜ ｜ ｜ ｜ ｜ ｜

JavaScriptライブラリのmootoolsベースであるFx.Presetsを利用すると複数エレメントの動きを操作できます。
今回は動きが面白いExpanding Boxesを紹介します。

使用方法
Fx.PresetsからFx.Elements.js、Fx.Presets.js、ExpandingBoxes.jsをmootoolsからmootools.jsをダウンロードします。
<script src="mootools-1.2.1-core.js" type="text/javascript"></script>
<script src="Fx.Elements.js" type="text/javascript"></script>
<script src="Fx.Presets.js" type="text/javascript"></script>
<script type="text/javascript" src="ExpandingBoxes.js"></script>
<script type="text/javascript">
window.addEvent('domready', function() {
var myBoxes = new ExpandingBoxes($$('.expand')[0], [3, 2]);
});
</script>

※上記のExpandingBoxes.jsで大きさなどを設定できます。
最後に拡大させる要素を以下のように記述すれば完成です。
<div class="expand">
<div class="box"><div class="contents">
<p>A</p>
</div></div>
<div class="box"><div class="contents">
<p>B</p>
</div></div>
<div class="box"><div class="contents">
<p>C</p>
</div></div>
<div class="box"><div class="contents">
<p>D</p>
</div></div>
<div class="box"><div class="contents">
<p>E</p>
</div></div>
<div class="box"><div class="contents">
<p>F</p>
</div></div>
</div>

またCSSで以下のように調整しています。
.expand {width: 723px; height: 482px; margin-bottom: -10px;}
.expand .box {background-color: #eeeeee; width: 200px; height: 200px; float: left; margin: 0 20px 20px 0; padding: 10px; overflow: hidden;}
.expand p {font-size: 500%; color: #aaaaaa; text-align: center; margin: 0.4em 0 0 0; padding: 0;}

mootoolsで複数エレメントを操作する「Fx.Presets」サンプル

記事作成：2009年04月21日

前の記事：フォームの入力項目にうっすらテキストを表示するJavaScript「jQuery Watermark Plugin」
次の記事：マウスオーバーをかっちょよくするJavaScript「jquery-glow」