1

コンテナには要素はありませんが、横にサムネイルがあります。サムネイルをクリックすると、対応するスライドがアニメーション化されてメイン コンテナがいっぱいになります。

html:

<div id="main_container">
    <div id="img_container">
        <div class="img_main"></div>
        <div class="img_main"></div>
        <div class="img_main"></div>
</div>
</div>

jQuery : </p> 

$(".img_main").click(function() {
$(this).css("position",'absolute').transition({
    top: '0px',
});

});​

出力はこのフィドルに表示されます

灰色のボックスをクリックすると、一番下のコンテナから出てきて、メインのコンテナを満たす必要があります。

プラグイン jquery.transit も使用しています。

この例に似たものを試しています: http://sokra.github.com/jmpress.js/examples/tab-control/

4

1 に答える 1

0

リンク先のプラグインのソースをダウンロードして使用する必要があるように思えます。見栄えがよく、十分に文書化されています。自分でやりたいと言うなら、私ならこうします。

<div id="main_container">

</div>

<div id="img_container">

   <div class="img_main">
     <img url="etc" />
   </div>

   <div class="img_main">
     <img src="wherever" />
   </div>

   <div class="img_main">
     <img src="you get the idea" />
   </div>

</div>

次に、jquery を使用してイメージ タグを html に読み込みます。アニメーションを保持する animate という CSS クラスを作成し、それimgをメイン div にロードした後に に追加します。これについては無数の方法があります。Google を親友にすることをお勧めします。

jQuery:

$(".img_main").click(function() {
    var img = $(this).find('img');
    $('#main_container').html(img.html());
    img.addClass('animate');
  });
});​

または、その github ページで無料のライブラリをダウンロードすることもできます。

于 2012-11-17T19:13:17.940 に答える