Question

容器中没有元素，但侧面有缩略图。单击缩略图时，相应的幻灯片应设置动画以填充主容器。

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：

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

});

输出显示在此fiddle

中

单击灰色框时，它应从底部容器中取出并填充主容器。

我也在使用插件jquery.transit。

我正在尝试类似于此示例的内容：http://sokra.github.com/jmpress.js/examples/tab-control/

Answer 1

在我看来，您应该只下载链接到的插件的源代码，并使用它。它看起来不错，并且有很好的文档记录。如果你坚持自己做，这就是我要做的。

<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类来保存动画，然后在将其加载到主div后将其添加到img。有很多方法可以解决这个问题。我建议你让google成为你最好的朋友。

jQuery的：

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

或者您可以在该github页面下载免费库。

使缩略图动画到主容器

1 个答案: