正方形の要素を敷き詰めるjQueryライブラリ – jquery.square.js
  • 2010年12月23日、修正を行いました。

ブログではなくて、トップページに使ってみようと作ってみた正方形の要素を敷き詰めるjQueryライブラリを作ってみたので公開してみようかと思います。

オプションで、一つの正方形のサイズ、隣の要素との間隔等などの設定が可能です。

使い方はこんな感じ。

1
$("#hoge").square();

上の記述で、「hoge」というidの付いた要素に適用されます。

デモはこちら

ダウンロード(名前をつけて保存)

以下は詳細説明。

関数概要

{target}.alphaRo({option});

{target}
適用する対象
{option}
target = square
敷き詰める要素のクラス名
inner = inner
敷き詰める要素と同じ高さにしたいクラス名
scaleSplit = _
要素一つの大きさを決める間の文字列(_x_y)
デフォルトでは「square _2」で2倍のサイズ、
「square _1_2」で縦長の長方形になります
size = 150
正方形一つの基本サイズ
space = 10
正方形と正方形の間隔
speed = 700
アニメーションの速度
(slow, normal, fastの三段階、もしくはミリ秒)
ease = easeOutQuad
イージングの種類
jQuery Easing Pluginが必要です)

サンプルコード

スタンダード

1
$(“a.sample01”).square();

正方形のサイズ変更

1
$(“a.sample02”).square({size:200});

アニメーション速度変更

1
$(“a.sample03″).square({speed:”fast”});
Author: SUSH
Link: http://blog.sus-happy.net/jquery-square-js/
Copyright Notice: All articles in this blog are licensed under CC BY-NC-SA 4.0 unless stating additionally.