mootoolsでも画像をめくるように遷移させるJavaScript「mooStack」

画像をめくるように切り替えるJavaScriptをいくつか紹介してきました。
そんな便利なJavaScriptをmootoolsでも可能にしたのが、mooStackです。

sponsors

使用方法

mooStackからmoostack.jsをmootoolsからmootools.netをダウンロードします。

<script src="mootools-1.2.1.js" type="text/javascript"></script>
<script src="moostack.js" type="text/javascript"></script>
上記を記述したら、切り替える画像などの要素を以下のように書きます。

<div id="stack">
	<div class="stack"><img src="画像パス1"></div>
	<div class="stack"><img src="画像パス2"></div>
</div>
上記は画像でなくても可能です。
最後にscriptを記述します。

<script type="text/javascript">
var stack = new Stack('stack', {
	scattering: 50, //ばら撒き具合
});
</script>
画像をクリックすることでも切り替えられますが、以下のようにボタンを付けることも可能です。

<div id="nav">
	<a href="javascript:void(0)" onclick="stack.goTo(0);">1枚目</a> 
	<a href="javascript:void(0)" onclick="stack.goTo(1);">2枚目</a> 
	<a href="javascript:void(0)" onclick="stack.swap('prev');">« 前へ</a>
	<a href="javascript:void(0)" onclick="stack.swap('next');">次へ »</a>
</div>

sponsors

サンプル

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