威言威语
我愿像茶,苦涩留心,清香予人。
威言威语
当前位置: 首页 > 设计 > 正文

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

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

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

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

腾讯微博的帮助页面分类

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

JQuery纵向手风琴切换

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

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

JQuery横向手风琴切换

下面这个是仿着腾讯的那个样式做的,当然使用的是上面的效果。做了个分类导航。

您可能还会对这些文章感兴趣!

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

  1. 吉光片羽
    29楼
    吉光片羽:腾讯TT浏览器 4.0 Windows XP

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

    2011-06-13 17:09 回复
  2. JaCall
    28楼
    JaCall:Google Chrome 10.0.648.204 Windows Server 2003

    前来围观!

    2011-04-06 13:08 回复
  3. 小星
    27楼
    小星:Firefox 3.6.14 Windows 7

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

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

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

    2011-03-05 15:56 回复
  4. song
    26楼
    song傲游浏览器 2.0 Windows XP

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

    2011-02-28 09:43 回复
    • William
      WilliamGoogle Chrome 9.0.597.98 Windows 7

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

      2011-02-28 21:50 回复
  5. 若名
    25楼
    若名:Internet Explorer 7.0 Windows XP

    目前 在折腾 JQuery

    2011-02-15 23:22 回复
  6. 任侠
    24楼
    任侠:Internet Explorer 8.0 Windows XP

    折腾的还不错~

    2011-02-03 02:00 回复
  7. 葡萄酒
    23楼
    葡萄酒:Internet Explorer 7.0 Windows XP

    来踩踩 春节快乐

    2011-01-31 13:43 回复
  8. kita
    22楼
    kita:Google Chrome 9.0.597.83 Mac OS X  10.6.6

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

    2011-01-30 17:00 回复
  9. kita
    21楼
    kita:Google Chrome 9.0.597.83 Mac OS X  10.6.6

    切換的時候有漸隱麼?

    2011-01-30 16:56 回复

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

gravatar

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