javascript - jsを使用したGoogle画像の灰色のボックスポップアップルックアンドフィール

Question

Google 画像検索で灰色のボックスがスライドアウトする効果を実現する最も効率的な方法は何ですか? 現在希望のデザインが出来上がっております。4 列の画像のセットと、画像をクリックするとスライドするボックスがあります。ただし、正しい場所（クリックされた画像の下）に飛び出す方法がわかりません。

Google 画像検索の例: http://bit.ly/YBe7ay 達成する必要があるものへのリンク: http://fxtouch.ee/projects/scale/

Answer 1

同様のタスクに取り組んでいるようです。http://www.htmldrive.net/items/show/1036/JQuery-Ajax-Cool-Shopping-cart-effectを参照してください。

44行目のどこかで、コードはクリックされたサムネイルの行のすぐ下に、対応するテキストを含む「ボックス」を配置します。

$('#cart_wrapper .cart-info').append('<div class="shopp" id="each-'+thisID+'"><div class="label">'+itemname+'</div><div class="shopp-price"> $<em>'+itemprice+'</em></div><span class="shopp-quantity">1</span><img src="remove.png" class="remove" /><br class="all" /></div>');

次に、110行目のどこかで、コードは定義されたdiv内に「ボックス」を配置します

$("html:not(:animated),body:not(:animated)").animate({scrollTop: targetOffset}, 800,function(){
   $('#wrap #detail-'+thisID).slideDown(500);
    return false;
});

ファイルを調べて、すべてがどのように組み合わされるかを確認してから、それをインターフェイスに統合します。