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 后将其添加到 div 中。有无数种方法可以解决这个问题。我建议你让谷歌成为你最好的朋友。

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 回答