2011-09-16 13 views
1

私は、(写真の中で)次のような振る舞いをすることができるjQueryコードがあることを楽しみにしています。だから私は以下のようにグリッドを持っていて、誰かが赤い領域(DIV)をクリックすると、そのdivはその周りのボックスを覆う(上に行く)(右または左から2つのボックス、下に1つまたは上から) また、彼が再びクリックすると、divは通常の位置とサイズに戻ります これをどのように達成するのかわかりません。私は誰かが助けてくれたらうれしいです。エキスパンドとカバリングボックス

ステージ1: http://img341.imageshack.us/img341/461/stage1.jpg

enter image description here

ステージ2:このように http://img153.imageshack.us/img153/9601/stage2n.jpg

enter image description here

+0

既にHTMLファンデーションをお持ちの場合は、jsFiddleに貼り付けてください。 – approxiblue

+0

そのため、ホバリングするとボックスが赤く変わりますか? –

+0

赤いボックスは一例ではありませんが、そのボタンをクリックするだけで何が起こるかを紹介していましたが、まだHTMLがありません – SwissChocolate

答えて

1

これは、私は認めざるを気にするよりも長くかかった:

http://jsfiddle.net/d4DZd/

トリックは、元の代わりに1つの要素のクローンを作成し、成長させることであるように要素はその位置を保持します。

+0

ありがとう、これは素晴らしい作品です、ボックスをクリックしたい場合は、同じコードを使用して一番下の行に配置されていますか? – SwissChocolate

+0

また、お時間をありがとうございます。 – SwissChocolate

+0

クリックリスナーを追加するだけです。あなたはあなたを始めるためのかなり良い例があります。 –

0

http://jsfiddle.net/kbPqU/

$(".box-spec").click(function() { 
    var cover_width = 3,cover_height = 3; 
    $("body").prepend('<div class="box-spec" style="width:' + ((128 + 10) * cover_width) + 'px;height:' + ((128 + 10) * cover_height) + 'px"></div>'); 
}); 
+0

ありがとうございます。赤いボックスは他と似ているはずです。同様のhtmlコードまた、ユーザーが別のボックス(たとえば、右側のボックス)をクリックした場合も同様です。それは、それの隣のテのものもカバーしなければならない。 – SwissChocolate

関連する問題