当前位置: 首页 > 设计 > 正文
avatar

用Jquery和CSS实现类似手风琴的TAB列表切换效果,分横向和纵向两种,可以拓展为很多的应用,内容的展示以及新闻的轮播都可以用到。

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

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

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

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

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

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

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

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

  1. avatar
    29楼
    吉光片羽 腾讯TT浏览器 Windows

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

    2011-06-13 17:09 [回复]
    • avatar
      William Mozilla Firefox Windows

      有时间研究下,嘎嘎~

      2011-06-13 23:08 [回复]
  2. avatar
    28楼
    JaCall Google Chrome Windows

    前来围观!

    2011-04-06 13:08 [回复]
  3. avatar
    27楼
    小星 Mozilla Firefox Windows

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

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

    页面样式,不会介意吧!:)

    2011-03-05 15:56 [回复]
    • avatar
      William Mozilla Firefox Windows

      呵呵,行啊,随便用

      2011-03-06 13:41 [回复]
  4. avatar
    26楼
    song Maxthon Windows

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

    2011-02-28 09:43 [回复]
    • avatar
      William Google Chrome Windows

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

      2011-02-28 21:50 [回复]
  5. avatar
    25楼
    若名 Internet Explorer Windows

    目前 在折腾 JQuery

    2011-02-15 23:22 [回复]
  6. avatar
    24楼
    任侠 Internet Explorer Windows

    折腾的还不错~

    2011-02-03 02:00 [回复]
  7. avatar
    23楼
    葡萄酒 Internet Explorer Windows

    来踩踩 春节快乐

    2011-01-31 13:43 [回复]
  8. avatar
    22楼
    kita Google Chrome Mac OS

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

    2011-01-30 17:00 [回复]
    • avatar
      William 世界之窗浏览器 Windows

      CSS3很好玩的,我乐此不疲

      2011-01-31 16:36 [回复]
      • avatar
        kita Google Chrome Mac OS

        恩,確實比較好玩的(^_^)

        2011-01-31 18:17 [回复]
  9. avatar
    21楼
    kita Google Chrome Mac OS

    切換的時候有漸隱麼?

    2011-01-30 16:56 [回复]
    • avatar
      William 世界之窗浏览器 Windows

      切换的时候有渐隐的

      2011-01-31 16:36 [回复]
  10. avatar
    20楼
    竹海听涛 Internet Explorer Windows

    不错 不错…..

    2011-01-30 13:39 [回复]
    • avatar
      William 世界之窗浏览器 Windows

      呵呵,是的

      2011-01-30 15:23 [回复]
  11. 额 源码呢?
    我还想收藏呢

    2011-01-29 18:11 [回复]
    • avatar
      William 世界之窗浏览器 Windows

      右击查看源代码,嘿嘿

      2011-01-30 10:51 [回复]
      • avatar
        海天 Internet Explorer Windows

        额 你也不服务到位
        都准备好

        2011-02-02 13:16 [回复]
  12. avatar
    18楼
    纯野 Internet Explorer Windows

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

    2011-01-29 16:14 [回复]
    • avatar
      William 世界之窗浏览器 Windows

      纠结,还在上班中

      2011-01-30 10:51 [回复]
  13. avatar
    17楼
    浩子窝窝 Internet Explorer Windows

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

    2011-01-29 15:08 [回复]
    • avatar
      William 世界之窗浏览器 Windows

      呵呵,新年快乐

      2011-01-30 10:51 [回复]
  14. avatar
    16楼
    xmwusx.cn Internet Explorer Windows

    貌似执行起来有点慢

    2011-01-29 14:18 [回复]
    • avatar
      William 世界之窗浏览器 Windows

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

      2011-01-30 10:50 [回复]
  15. avatar
    15楼
    ForRSS Mozilla Firefox Windows

    不错,不错,收藏了。

    2011-01-29 09:34 [回复]
    • avatar
      William 世界之窗浏览器 Windows

      哈哈~

      2011-01-30 10:50 [回复]
  16. avatar
    14楼
    阿修罗 世界之窗浏览器 Windows

    在微博里的效果真是好

    2011-01-28 23:51 [回复]
    • avatar
      William 世界之窗浏览器 Windows

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

      2011-01-30 10:49 [回复]
  17. avatar
    13楼
    skidu 搜狗浏览器 Windows

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

    2011-01-28 22:59 [回复]
    • avatar
      William 世界之窗浏览器 Windows

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

      2011-01-30 10:48 [回复]
  18. avatar
    12楼
    逝魂 Maxthon Windows

    这个效果挺喜欢的

    2011-01-28 21:07 [回复]
    • avatar
      William 世界之窗浏览器 Windows

      我也很喜欢

      2011-01-30 10:47 [回复]
  19. avatar
    11楼
    Prouz Google Chrome Windows

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

    2011-01-28 20:30 [回复]
    • avatar
      William 世界之窗浏览器 Windows

      有手动的有自动的

      2011-01-30 10:47 [回复]
  20. avatar
    10楼
    uoson Internet Explorer Windows

    这个插件帅气。

    2011-01-28 16:42 [回复]
    • avatar
      William 世界之窗浏览器 Windows

      哈哈,是滴是滴

      2011-01-30 10:46 [回复]
  21. avatar
    9楼
    龙城瓶子 Mozilla Firefox Windows

    恩,恩
    相当的帅哈。。。

    2011-01-28 12:42 [回复]
  22. avatar
    8楼
    优趣 Google Chrome Windows

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

    2011-01-28 09:40 [回复]
    • avatar
      William 世界之窗浏览器 Windows

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

      2011-01-28 11:42 [回复]
  23. avatar
    7楼
    阿鼎 Google Chrome Windows

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

    2011-01-27 23:15 [回复]
    • avatar
      William Internet Explorer Windows

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

      2011-01-28 00:06 [回复]
  24. avatar
    6楼
    爱惜 Mozilla Windows

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

    2011-01-27 20:48 [回复]
    • avatar
      William Internet Explorer Windows

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

      2011-01-28 00:05 [回复]
  25. avatar
    5楼
    IM路人 Maxthon Windows

    不错,有空整整

    2011-01-27 20:25 [回复]
    • avatar
      William Internet Explorer Windows

      恩,哈哈~

      2011-01-28 00:05 [回复]
  26. avatar
    4楼
    云侃 Mozilla Firefox Windows

    手风琴,原来指的是这个

    2011-01-27 19:48 [回复]
    • avatar
      William Internet Explorer Windows

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

      2011-01-28 00:04 [回复]
  27. avatar
    地板
    有点蓝 Opera Windows

    这个效果太炫了哈

    2011-01-27 16:55 [回复]
    • avatar
      William Internet Explorer Windows

      恩,是很不错滴

      2011-01-28 00:04 [回复]
  28. avatar
    板凳
    雅岚 Mozilla Firefox Windows

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

    2011-01-27 16:31 [回复]
    • avatar
      William Google Chrome Windows

      哈哈,看看效果就行了~!

      2011-01-27 16:40 [回复]
  29. avatar
    沙发
    oror Internet Explorer Windows

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

    2011-01-27 01:24 [回复]
    • avatar
      William Google Chrome Windows

      您老这么谦虚可不行啊~

      2011-01-27 16:15 [回复]

发表评论

question razz sad smile redface biggrin surprised eek confused cool lol mad rolleyes wink neutral cry

快捷键:Ctrl+Enter