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

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

｜ ｜ ｜ ｜ ｜ ｜ ｜

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

使用方法
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="画像パス１"></div>
<div class="stack"><img src="画像パス２"></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>

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

記事作成：2009年03月28日

前の記事：【お知らせ】.htaccessを変更し直リンクを禁止します
次の記事：角丸もグラデーションも付けてしまうJavaScript「Round Corners jQuery Plugin」