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

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

sponsors

使用方法

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;}

サンプル

※クリックしてください

A

B

C

D

E

F

sponsors

Javascriptサンプルページ一覧
skuare.net