JQuery横向纵向手风琴切换效果-威言威语

JQuery横向纵向手风琴切换效果

William2011-01-26 23:26设计13,263次阅读58条评论

最近在腾讯微博的帮助页面看到一个效果，类似手风琴的切换效果。不过腾讯微博的那个效果感觉还有点呆板，于是想到用Jquery做个稍稍炫一些。

这种列表格式的分类感觉使用的还是蛮多的。同时也可以做一些扩展。

之前就发现暴雪主页的那个类似手风琴切换的效果很棒，暴雪主页的整体页面的效果也是很棒的。于是就可以把暴雪主页的效果给用到这里来。

VIEW DEMO

暴雪这个是纵向手风琴切换，于是我又整理了一些横向手风琴切换的效果。大家可以研究研究，这两个效果在目前使用是很多的，可以拓展为很多的应用。内容的展示以及新闻的轮播都可以用到。

下面这个横向手风琴切换有3个样式，原版的IE8下分类前面的数字有些错位，我稍稍修正了下。

VIEW DEMO

下面这个是仿着腾讯的那个样式做的，当然使用的是上面的效果。做了个分类导航。你可以到这里看效果WangYe’s Space，或者看

VIEW DEMO

本文固定链接: https://www.weisay.com/blog/jquery-accordion-switch.html | 威言威语

JQuery横向纵向手风琴切换效果：目前有 58 条评论

29楼
吉光片羽：

不考虑推荐一下我的KandyTabs么，哈哈！不过，我那界面有点不卡入目，嘎嘎！

2011-06-13 17:09 回复
- William文章作者：
  
  有时间研究下，嘎嘎~
  
  2011-06-13 23:08 回复
28楼
JaCall：

前来围观！

2011-04-06 13:08 回复
27楼
小星：

你的demo页面做的很漂亮，回去我也做一个类似的页面，

我的的每次做的页面都不一样，很随便的，打算借鉴你的

页面样式，不会介意吧！:)

2011-03-05 15:56 回复
- William文章作者：
  
  呵呵，行啊，随便用
  
  2011-03-06 13:41 回复
26楼
song：

原来在懒人图库看到过这个代码，挺好玩的，人和人真的不同，我们都是下载一个改了用，从不做研究，高手还是喜欢自己摆弄出来……

2011-02-28 09:43 回复
- William文章作者：
  
  没有啦，是一个朋友要这个效果，我就给整理了一下
  
  2011-02-28 21:50 回复
25楼
若名：

目前在折腾 JQuery

2011-02-15 23:22 回复
24楼
任侠：

折腾的还不错~

2011-02-03 02:00 回复
23楼
葡萄酒：

来踩踩春节快乐

2011-01-31 13:43 回复
22楼
kita：

最近也在看css3了，有時候看看哪些可以用上的

2011-01-30 17:00 回复
- William文章作者：
  
  CSS3很好玩的，我乐此不疲
  
  2011-01-31 16:36 回复
  - kita：
    
    恩，確實比較好玩的(^_^)
    
    2011-01-31 18:17 回复
21楼
kita：

切換的時候有漸隱麼？

2011-01-30 16:56 回复
- William文章作者：
  
  切换的时候有渐隐的
  
  2011-01-31 16:36 回复
20楼
竹海听涛：

不错不错…..

2011-01-30 13:39 回复
- William文章作者：
  
  呵呵，是的
  
  2011-01-30 15:23 回复
19楼
宿迁学院论坛：

额源码呢？
我还想收藏呢

2011-01-29 18:11 回复
- William文章作者：
  
  右击查看源代码，嘿嘿
  
  2011-01-30 10:51 回复
  - 海天：
    
    额你也不服务到位
    都准备好
    
    2011-02-02 13:16 回复
18楼
纯野：

快过节了，休息下吧。哈哈。

2011-01-29 16:14 回复
- William文章作者：
  
  纠结，还在上班中
  
  2011-01-30 10:51 回复
17楼
浩子窝窝：

这个还有点高级也。威哥我来拜年了，新年快乐！

2011-01-29 15:08 回复
- William文章作者：
  
  呵呵，新年快乐
  
  2011-01-30 10:51 回复
16楼
xmwusx.cn：

貌似执行起来有点慢

2011-01-29 14:18 回复
- William文章作者：
  
  网速吧，我打开还是很快的
  
  2011-01-30 10:50 回复
15楼
ForRSS：

不错，不错，收藏了。

2011-01-29 09:34 回复
- William文章作者：
  
  哈哈~
  
  2011-01-30 10:50 回复
14楼
阿修罗：

在微博里的效果真是好

2011-01-28 23:51 回复
- William文章作者：
  
  腾讯微博那个没有用Jquery哦，比较僵硬
  
  2011-01-30 10:49 回复
13楼
skidu：

最近怎么感觉貌似大家都在折腾手风琴。。。

2011-01-28 22:59 回复
- William文章作者：
  
  是么~~~效果好用的人就多了啊
  
  2011-01-30 10:48 回复
12楼
逝魂：

这个效果挺喜欢的

2011-01-28 21:07 回复
- William文章作者：
  
  我也很喜欢
  
  2011-01-30 10:47 回复
11楼
Prouz：

晕，原来是自动换，我还以为手点的。。点了半天没反应= =

2011-01-28 20:30 回复
- William文章作者：
  
  有手动的有自动的
  
  2011-01-30 10:47 回复
10楼
uoson：

这个插件帅气。

2011-01-28 16:42 回复
- William文章作者：
  
  哈哈，是滴是滴
  
  2011-01-30 10:46 回复
9楼
龙城瓶子：

恩，恩
相当的帅哈。。。

2011-01-28 12:42 回复
- William文章作者：
  
  哈哈，是的，不是好的我不推荐。
  
  2011-01-30 10:45 回复
  - 龙城瓶子：
    
    http://www.global-free-magazines.com/B2B.html#/gallery/
    这个我觉得也是相当的酷
    
    2011-01-30 11:45 回复
    - William文章作者：
      
      Flash的~对Flash没什么研究~
      
      2011-01-30 13:01 回复
8楼
优趣：

哥今天回家啦！提前祝福大家新年快乐、大展鸿兔！

2011-01-28 09:40 回复
- William文章作者：
  
  哈哈，回家好啊，我还要再过几天呢~
  
  2011-01-28 11:42 回复
7楼
阿鼎：

很不错的嘛，要是弄成插件就帅了，作为幻灯片，就像博客联盟。

2011-01-27 23:15 回复
- William文章作者：
  
  其实吧，倒是不必插件，简单的调用就能实现了
  
  2011-01-28 00:06 回复
6楼
爱惜：

这风琴手伸缩效果也就和我的日志那种伸缩效果差不多。

2011-01-27 20:48 回复
- William文章作者：
  
  恩啊，很多都是可以扩展的。
  
  2011-01-28 00:05 回复
5楼
IM路人：

不错，有空整整

2011-01-27 20:25 回复
- William文章作者：
  
  恩，哈哈~
  
  2011-01-28 00:05 回复
4楼
云侃：

手风琴，原来指的是这个

2011-01-27 19:48 回复
- William文章作者：
  
  象形的效果，跟手风琴很像的
  
  2011-01-28 00:04 回复
地板
有点蓝：

这个效果太炫了哈

2011-01-27 16:55 回复
- William文章作者：
  
  恩，是很不错滴
  
  2011-01-28 00:04 回复
板凳
雅岚：

岚女看了半天，一头雾水啊。。。啊。。。啊。。。

2011-01-27 16:31 回复
- William文章作者：
  
  哈哈，看看效果就行了~！
  
  2011-01-27 16:40 回复
沙发
oror：

呵呵，那个主站还在维护中，为了不让页面单调些，现在那个首页是随便拼凑的，当然威哥提供的那个手风琴切换效果比我原先用的流畅多了:-)

2011-01-27 01:24 回复
- William文章作者：
  
  您老这么谦虚可不行啊~
  
  2011-01-27 16:15 回复

发表评论

29楼

吉光片羽：

不考虑推荐一下我的KandyTabs么，哈哈！不过，我那界面有点不卡入目，嘎嘎！

2011-06-13 17:09 回复

William文章作者：

有时间研究下，嘎嘎~

2011-06-13 23:08 回复

28楼

JaCall：

前来围观！

2011-04-06 13:08 回复

27楼

小星：

你的demo页面做的很漂亮，回去我也做一个类似的页面，

我的的每次做的页面都不一样，很随便的，打算借鉴你的

页面样式，不会介意吧！:)

2011-03-05 15:56 回复

William文章作者：

呵呵，行啊，随便用

2011-03-06 13:41 回复

26楼

song：

原来在懒人图库看到过这个代码，挺好玩的，人和人真的不同，我们都是下载一个改了用，从不做研究，高手还是喜欢自己摆弄出来……

2011-02-28 09:43 回复

William文章作者：

没有啦，是一个朋友要这个效果，我就给整理了一下

2011-02-28 21:50 回复

25楼

若名：

目前在折腾 JQuery

2011-02-15 23:22 回复

24楼

任侠：

折腾的还不错~

2011-02-03 02:00 回复

23楼

葡萄酒：

来踩踩春节快乐

2011-01-31 13:43 回复

22楼

kita：

最近也在看css3了，有時候看看哪些可以用上的

2011-01-30 17:00 回复

William文章作者：

CSS3很好玩的，我乐此不疲

2011-01-31 16:36 回复
- kita：
  
  恩，確實比較好玩的(^_^)
  
  2011-01-31 18:17 回复

21楼

切換的時候有漸隱麼？

2011-01-30 16:56 回复

William文章作者：

切换的时候有渐隐的

2011-01-31 16:36 回复

20楼

竹海听涛：

不错不错…..

2011-01-30 13:39 回复

William文章作者：

呵呵，是的

2011-01-30 15:23 回复

19楼

宿迁学院论坛：

额源码呢？
我还想收藏呢

2011-01-29 18:11 回复

William文章作者：

右击查看源代码，嘿嘿

2011-01-30 10:51 回复
- 海天：
  
  额你也不服务到位
  都准备好
  
  2011-02-02 13:16 回复

18楼

纯野：

快过节了，休息下吧。哈哈。

2011-01-29 16:14 回复

William文章作者：

纠结，还在上班中

2011-01-30 10:51 回复

17楼

浩子窝窝：

这个还有点高级也。威哥我来拜年了，新年快乐！

2011-01-29 15:08 回复

William文章作者：

呵呵，新年快乐

2011-01-30 10:51 回复

16楼

xmwusx.cn：

貌似执行起来有点慢

2011-01-29 14:18 回复

William文章作者：

网速吧，我打开还是很快的

2011-01-30 10:50 回复

15楼

ForRSS：

不错，不错，收藏了。

2011-01-29 09:34 回复

William文章作者：

哈哈~

2011-01-30 10:50 回复

14楼

阿修罗：

在微博里的效果真是好

2011-01-28 23:51 回复

William文章作者：

腾讯微博那个没有用Jquery哦，比较僵硬

2011-01-30 10:49 回复

13楼

skidu：

最近怎么感觉貌似大家都在折腾手风琴。。。

2011-01-28 22:59 回复

William文章作者：

是么~~~效果好用的人就多了啊

2011-01-30 10:48 回复

12楼

逝魂：

这个效果挺喜欢的

2011-01-28 21:07 回复

William文章作者：

我也很喜欢

2011-01-30 10:47 回复

11楼

Prouz：

晕，原来是自动换，我还以为手点的。。点了半天没反应= =

2011-01-28 20:30 回复

William文章作者：

有手动的有自动的

2011-01-30 10:47 回复

10楼

uoson：

这个插件帅气。

2011-01-28 16:42 回复

William文章作者：

哈哈，是滴是滴

2011-01-30 10:46 回复

9楼

龙城瓶子：

恩，恩
相当的帅哈。。。

2011-01-28 12:42 回复

William文章作者：

哈哈，是的，不是好的我不推荐。

2011-01-30 10:45 回复
- 龙城瓶子：
  
  http://www.global-free-magazines.com/B2B.html#/gallery/
  这个我觉得也是相当的酷
  
  2011-01-30 11:45 回复
  - William文章作者：
    
    Flash的~对Flash没什么研究~
    
    2011-01-30 13:01 回复

8楼

优趣：

哥今天回家啦！提前祝福大家新年快乐、大展鸿兔！

2011-01-28 09:40 回复

William文章作者：

哈哈，回家好啊，我还要再过几天呢~

2011-01-28 11:42 回复

7楼

阿鼎：

很不错的嘛，要是弄成插件就帅了，作为幻灯片，就像博客联盟。

2011-01-27 23:15 回复

William文章作者：

其实吧，倒是不必插件，简单的调用就能实现了

2011-01-28 00:06 回复

6楼

爱惜：

这风琴手伸缩效果也就和我的日志那种伸缩效果差不多。

2011-01-27 20:48 回复

William文章作者：

恩啊，很多都是可以扩展的。

2011-01-28 00:05 回复

5楼

IM路人：

不错，有空整整

2011-01-27 20:25 回复

William文章作者：

恩，哈哈~

2011-01-28 00:05 回复

4楼

云侃：

手风琴，原来指的是这个

2011-01-27 19:48 回复

William文章作者：

象形的效果，跟手风琴很像的

2011-01-28 00:04 回复

地板

有点蓝：

这个效果太炫了哈

2011-01-27 16:55 回复

William文章作者：

恩，是很不错滴

2011-01-28 00:04 回复

板凳

雅岚：

岚女看了半天，一头雾水啊。。。啊。。。啊。。。

2011-01-27 16:31 回复

William文章作者：

哈哈，看看效果就行了~！

2011-01-27 16:40 回复

沙发

oror：

呵呵，那个主站还在维护中，为了不让页面单调些，现在那个首页是随便拼凑的，当然威哥提供的那个手风琴切换效果比我原先用的流畅多了:-)

2011-01-27 01:24 回复

William文章作者：

您老这么谦虚可不行啊~

2011-01-27 16:15 回复

威言威语