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

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

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

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

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

腾讯微博的帮助页面分类

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

JQuery纵向手风琴切换

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

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

JQuery横向手风琴切换

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

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

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

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

  1. 29楼

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

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

    前来围观!

    2011-04-06 13:08 回复

发表评论

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

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

快捷键:Ctrl+Enter