jquery - 如何创建简单的图像滑块/手风琴？

Question

在wordpress页面中有一个垂直图像插件..

我想要一个如下所示的网页：

在这有一个主面板产品。其中有手风琴的图像..

只有 10% 的图像是可见的..but onclick of the image1它应该扩展 100%，如下所示：

最重要的是..这些图像用户应该能够放入WP 页面

静态它可能..如图所示

但我希望它在页面中进行编辑或..其他方式..可能在一个文件夹中..

可能吗？有没有可以帮助我的插件？或者如果我需要为此编码，那么任何人都可以给我关于相同的想法......？

Answer 1

这是您的简单 jQuery 滑块/手风琴：

您可以从这里检查（jsfiddle）。

jQuery：

$('div').bind({
  click: function() {
    $('div').stop().animate({'height':'100px'},600);//600 sets time. 600miliseconds
    $(this).stop().animate({'height':'320px'},600);
  },
  /* if you want to do it with hover effects, just deactive click and use these:
  mouseenter: function() {
    $('div').stop().animate({'height':'100px'},600);//600 sets time. 600miliseconds
    $(this).stop().animate({'height':'320px'},600);
  },
  mouseleave: function() {
    $('div').stop().animate({'height':'100px'},600);
  }
  */
});​

html:

<div>
   <img src="http://www.hurriyet.com.tr/_np/7181/17287181.jpg" />
</div>
<div>
   <img src="http://www.hurriyet.com.tr/_np/2790/17282790.jpg" />
</div>
<div>
   <img src="http://www.hurriyet.com.tr/_np/6751/17286751.jpg" />
</div>
<div>
   <img src="http://www.hurriyet.com.tr/_np/7203/17287203.jpg" />
</div>

CSS：

div { overflow:hidden; float:left; height:100px; margin:0 5px; border-bottom: 1px solid #000; }  ​

注意：你可以在任何东西上使用它，只需要初始化 jQuery (: