`

jQuery fsBanner 手风琴

阅读更多

fsbanner是一款自定义功能丰富的响应式网站Banner手风琴特效jQuery插件。该手风琴特效兼容性很好,支持点击和鼠标滑过等触发事件,并且可添加标题或描述。

在线实例

默认 带标题 鼠标滑过
带文字介绍 带文字介绍(默认隐藏) onChanged事件

使用方法

  1. <div class='fsbanner' > 
  2.     <div style='background-image:url(images/black.jpg)'></div> 
  3.     <div style='background-image:url(images/brown.jpg)'></div> 
  4.     <div style='background-image:url(images/panda.jpg)'></div> 
  5.     <div style='background-image:url(images/polar.jpg)'></div> 
  6. </div>
复制
  1. $('.fsbanner').fsBanner();
复制

参数详解

参数 描述 默认值
showName 若设为true, .name 元素将被显示在Banner的左下方 true
trigger 使用哪种方式来触发手风琴的展开和收缩。有mouse,click.默认点击click, click
whenEmpty 当没有Banner展开的时候,设置相关属性title: '素材火',  description: '素材火提供网站模板,jQuery特效,PHP包括PHP教程PHP源码PHP商城源码PHP培训PHP面试题和PHP招聘等' -
onChanged 当banner被展开的时候该函数将被触发。它接收2个参数:展开的banner和之前展开的banner。这些参数是jQuery选择器。 {}
toUpdate 当你展开一个Banner的时候,脚本会从它的HTML元素中的span元素中获取信息。你可以通过这个选项来使用这些值去更新其它元素。 {}
hideParent 如果设置了该选项,whenEmpty参数将被忽略。当没有banner同时又设置了hideParent的时候,脚本将隐藏传入的选择器元素。 -

 

1
0
分享到:
评论
发表评论

文章已被作者锁定,不允许评论。

相关推荐

    jQuery滑动手风琴内容切换特效.rar

    jQuery滑动手风琴内容切换特效.rar jQuery滑动手风琴内容切换特效.rar jQuery滑动手风琴内容切换特效.rar jQuery滑动手风琴内容切换特效.rar jQuery滑动手风琴内容切换特效.rar jQuery滑动手风琴内容切换特效.rar ...

    jQuery横向手风琴效果.zip

    总结来说,"jQuery横向手风琴效果"是一种利用jQuery和`fsbanner.js`插件实现的交互式设计,它可以高效地管理页面空间,提供良好的用户体验。通过理解和应用这个代码包,开发者可以进一步提升网页的互动性和视觉吸引...

    jQuery fsbanner.js横向手风琴滑动切换特效

    本文将详细解析"jQuery fsbanner.js横向手风琴滑动切换特效"这一主题,涵盖其核心原理、实现方式以及相关知识点。 首先,`fsbanner.js`是一个专门用于创建手风琴滑动切换效果的插件,它结合了jQuery的强大功能,为...

    JQuery横向手风琴效果1

    "JQuery横向手风琴效果1"就是一个利用jQuery实现的创新性组件,它为用户提供了一种高效的方式来展示内容,尤其是在有限的空间内展示大量信息时。手风琴效果通常用于折叠和展开内容区域,使得用户可以逐个查看或者...

    jQuery垂直手风琴列表展示代码.zip

    《jQuery垂直手风琴列表展示代码详解》 在网页设计中,动态效果的运用能够极大地提升用户体验,其中手风琴效果就是一种常见的交互元素。"jQuery垂直手风琴列表展示代码"是基于JavaScript库jQuery和Bootstrap框架...

    jquery横向手风琴效果

    **jQuery 横向手风琴效果详解** 在网页设计中,为了提升用户体验,经常会使用各种交互效果。其中,手风琴效果是一种常见的组件,它允许用户逐个展开或关闭内容区域,通常用于节省空间并展示多级信息。在本案例中,...

    jquery自动手风琴 jquery自动手风琴代码下载.zip

    《jQuery自动手风琴效果详解及代码实现》 在网页设计与开发中,为了提高用户体验,经常使用各种交互效果来增强页面的动态性。其中,jQuery自动手风琴(Accordion)效果是一种常见的交互元素,它将多段内容折叠在一...

    jquery手风琴效果

    jQuery手风琴效果是一种常见的网页交互设计,它利用JavaScript库jQuery实现了一种可折叠和展开的面板效果,常用于导航菜单、信息展示等场景。在网页中,这种效果可以让用户在一个有限的空间内查看和访问大量内容,...

    jquery弹性手风琴(导航菜单)效果

    《jQuery弹性手风琴导航菜单实现详解》 在网页设计中,导航菜单是不可或缺的一部分,它为用户提供清晰的页面结构和便捷的操作路径。而“jQuery弹性手风琴”效果则是导航菜单的一种创新形式,它通过动态展示和隐藏...

    jquery手风琴实现图片切换

    本教程将详细讲解如何利用jQuery实现一个手风琴式的图片切换效果,该效果同时具备自动播放和手动播放功能,用户可以通过点击文字来控制图片的切换。 首先,我们需要在HTML中设置基本的结构。手风琴效果通常涉及到可...

    jquery竖直手风琴菜单收缩展示下拉菜单

    在网页设计中,jQuery竖直手风琴菜单是一种常见的交互元素,它允许用户通过点击菜单项来展开或收缩子菜单,以节省空间并提供良好的用户体验。这种效果在内容丰富的网站中特别受欢迎,因为它使得导航更加直观和高效。...

    jQuery左侧手风琴菜单代码.zip

    这个“jQuery左侧手风琴菜单代码”压缩包提供了一个实现左侧导航菜单的示例,该菜单采用了手风琴效果。手风琴菜单是一种常见的UI设计元素,它允许用户通过展开或关闭各个部分来浏览层次结构的内容,节省空间同时保持...

    jQuery扁平手风琴代码

    jQuery扁平手风琴是一种常见的网页交互元素,用于呈现可折叠的内容区域,用户可以逐个展开或收起这些区域以查看或隐藏详细信息。在网页设计中,它被广泛应用于菜单、FAQs、多级导航等场景,以节省空间并提供良好的...

    炫酷的jQuery手风琴图片和菜单插件及

    今天我们就来分享一些基于jQuery的手风琴图片和菜单插件,并提供源代码下载,一起来看看吧。 1、jQuery横向手风琴图片展示插件 今天我们要来介绍一款非常酷的jQuery插件,它是一款横向的手风琴图片展示切换插件,每...

    jquery菜单手风琴_3种模式可以多组操作

    本主题将深入探讨如何使用jQuery实现一个菜单手风琴效果,特别是针对三种不同的操作模式以及如何支持多组手风琴菜单。 首先,让我们了解“手风琴”菜单的概念。手风琴菜单是一种用户界面元素,它允许在一个有限的...

    jquery竖直手风琴导航菜单点击单个展示收缩效果

    在网页设计中,jQuery竖直手风琴导航菜单是一种常见的交互元素,它允许用户通过点击菜单项来展开或收缩子菜单内容,以节省空间并提供更佳的用户体验。这种效果通常用于网站的导航栏,帮助用户高效地浏览和访问各个...

    jquery水平手风琴折叠菜单插件

    【jQuery水平手风琴折叠菜单插件】是一种利用jQuery库实现的交互式菜单设计,它在网页中提供了独特的用户体验。这种菜单设计以1870年的主题为灵感,结合了现代技术,使得用户在浏览菜单时能感受到历史与科技的完美...

    jQuery手风琴轮播特效

    在这个"jQuery手风琴轮播特效"项目中,我们将探讨如何利用jQuery实现一个具有独特视觉效果的轮播插件。该插件的特点是结合了手风琴效果和左右滑动,同时在展开内容时还带有图片旋转特效,为用户带来更加丰富的互动...

    jQuery左右滑动手风琴轮播切换特效

    在本文中,我们将深入探讨"jQuery左右滑动手风琴轮播切换特效"这一主题,它是一种常见的网页交互设计,能够为用户提供动态、直观且有趣的浏览体验。jQuery库因其简洁的API和强大的功能,在Web开发中被广泛使用,尤其...

Global site tag (gtag.js) - Google Analytics