Example


Documentation

jStack.jsは画像をペラペラめくっていくjQuery Pluginです。
目玉商品はシャッフル機能です。

サンプルコード

JavaScript

以下のサンプルではimageBoxというidを持つ要素の子にimgタグが複数並んでいることを想定しています。
まずはjStack関数を呼び出して初期化してください。
引数を何も渡さなければデフォルト値で動作します。
またパラメータ名でOutInというサフィックスが付いているものは、Outが画像が横に呼び出たとき、Inが画像が元の場所に戻るときを意味します。
なので画像が横にいくときはゆっくりにして、戻るときに速くするなどアレンジしたMotionが可能になります。

isClickAnimationをtrueにしている場合は画像を直接クリックしてめくることができますが、画像をリンクにしていた場合はめくるよりも遷移して欲しいところです。
そうゆう場合はisClickをfalseにし、他にめるく用のボタンを用意して以下のようにイベントセットしてください。

また今回作ってみたかったシャッフル機能はトランプのように並びをランダムにする関数になります。

HTML

Download