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

【问题标题】：how to create simple image slider / accordion ?如何创建简单的图像滑块/手风琴？
【发布时间】：2012-07-19 07:45:22
【问题描述】：

在 wordpress 页面中是否有用于垂直图像的插件..

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

这里有一个主面板 Products 。其中有手风琴的图像..

只有 10% 的图像是可见的..但是点击 image1 它应该扩展 100% 如下：

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

可能的静态..如this所示

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

有可能吗？有没有可以帮助我的插件？否则，如果我需要为此编写代码谁能给我关于相同的想法...？

【问题讨论】：

如果你想用 css3 来做，这里是你的完美例子：tympanus.net/Tutorials/CSS3ImageAccordion
感谢 barlasapaydin..它的图像水平滑动..我想要相同但垂直..我是 jquery 编码的新手..plzz..
是的，是的，我正在尝试......我几乎明白了......

标签： jquery image slider jquery-animate accordion

【解决方案1】：

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

You can inspect from here (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 (:

【讨论】：

上面的代码显示了图像，但是鼠标悬停时它没有最大化....:(
得走了，对不起，需要吃点东西（：但你可以处理这个。