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

画像をめくるように切り替えるJavaScriptをいくつか紹介してきました。
そんな便利なJavaScriptをmootoolsでも可能にしたのが、mooStackです。
mootoolsでも画像をめくるように遷移させるJavaScript「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="画像パス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>

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

sponsors

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

記事作成:
記事URL:

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