正方形の要素を敷き詰めるjQueryライブラリ – jquery.square.js
- 2010年12月23日、修正を行いました。
ブログではなくて、トップページに使ってみようと作ってみた正方形の要素を敷き詰めるｊQueryライブラリを作ってみたので公開してみようかと思います。
オプションで、一つの正方形のサイズ、隣の要素との間隔等などの設定が可能です。
使い方はこんな感じ。
$("#hoge").square();
上の記述で、「hoge」というidの付いた要素に適用されます。
以下は詳細説明。
関数概要
{target}.alphaRo({option});
- {target}
- 適用する対象
- {option}
- [target](string) = square
- 敷き詰める要素のクラス名
- [inner](string) = inner
- 敷き詰める要素と同じ高さにしたいクラス名
- [scaleSplit](string) = _
- 要素一つの大きさを決める間の文字列（_x_y） デフォルトでは「square _2」で2倍のサイズ、 「square _1_2」で縦長の長方形になります
- [size](number) = 150
- 正方形一つの基本サイズ
- [space](number) = 10
- 正方形と正方形の間隔
- [speed](*) = 700
- アニメーションの速度 （slow, normal, fastの三段階、もしくはミリ秒）
- [ease](string) = easeOutQuad
- イージングの種類 （jQuery Easing Pluginが必要です）
スタンダード
$("a.sample01").square();
正方形のサイズ変更
$("a.sample02").square({size:200});
アニメーション速度変更
$("a.sample03″).square({speed:"fast"});