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的时候,脚本将隐藏传入的选择器元素。 -

jQuery fsBanner 手风琴的更多相关文章

  1. jQuery之手风琴图片

    <!DOCTYPE HTML> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  2. jquery多级手风琴插件–accordion.js

    手风琴菜单一般用于下拉导航,由于外观非常简洁,使用起来跟手风琴一样可以拉伸和收缩而得名,项目中适当应用手风琴效果会给用户带来非常好的体验.本文借助jQuery插件轻松打造一个非常不错的手风琴效果的菜单 ...

  3. 简单jQuery 实现手风琴菜单

    简单jQuery 实现手风琴菜单 css代码 如下: *{ margin: 0; padding: 0; } #accordion{ width: 500px; } #accordion>div ...

  4. 基于jquery横向手风琴效果

    基于jquery横向手风琴效果是一款基于jquery实现的左右滑动手风琴图片轮播切换特效.效果图如下: 在线预览   源码下载 效果图如下: <div class="flash&quo ...

  5. 一款基于jquery的手风琴显示详情

    今天要各网友分享一款基于jquery的手风琴显示详情实例.当单击顶部箭头的时候,该项以手风琴的形式展示显示详情.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div al ...

  6. 一款基于jquery的手风琴图片展示效果

    今天要给大家分享一款基于jquery的手风琴图片展示效果.这款图片的展示效果鼠标经过前是灰色的,当鼠标经过时图片变大且变为彩色.效果图如下: 在线预览   源码下载 实现的代码. html代码: &l ...

  7. jQuary总结11:jQuery插件封装---jQuery封装 手风琴 动画插件

    完整代码下载点击我的GitHub: https://github.com/XingJYGo/jquery-accordion 1 手风琴的效果展示如下: 2 封装插件目录结构如下: 主要包括:HTML ...

  8. jquery横向手风琴效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. jQuery横向手风琴图片滑块

    jQuery横向手风琴图片滑块是一款非常不错的jQuery特效横向手风琴图片滑块插件,可以自动播放,也可以鼠标滑过时切换.+ 欢迎喜欢的朋友下载研究 源码下载页:http://www.huiyi8.c ...

随机推荐

  1. D3.js学习(七)

    上一节中我们学会了如何旋转x轴标签以及自定义标签内容,在这一节中,我们将接触动画(transition) 首先,我们要在页面上添加一个按钮,当我们点击这个按钮时,调用我们的动画.所以,我们还需要在原来 ...

  2. windows下配置apache+php环境

    PHP安装 由于windows下php扩展5.6的多余7.0,故以php5.6为开发环境.如果对扩展要求不高,可以使用php7,安装过程类似. 约定: 环境安装目录: D:/phpsetup/ |-- ...

  3. python __globals__, __file__

    Attribute Meaning   __doc__ The function's documentationstring, or None ifunavailable; not inherited ...

  4. 与大家分享robotium一个小问题。Test run failed:Instrumentation run failed due to 'java.lang.ClassNotFoundException'

    今天和大家分享robotium一个小问题. 我们在运行自已经搭好的框架时,有可能会出现一个找不到类的错误(如上图所示). 问题是重签名工具给出的activity有误,这时我们可以用Appt命令查看重签 ...

  5. Ubuntu 14.04 中 安装elasticsearch2.*+logstash2.*+kibana

    在Ubuntu 14.04 上安装单机版ELK 2.*(脚本化) 1.判断是否为root权限 if [ "${UID}" -ne 0 ]; then echo "You ...

  6. springmvc环境搭建以及常见问题解决

    1.新建maven工程 a)  打开eclipse,file->new->project->Maven->Maven Project b)  下一步 c)   选择创建的工程为 ...

  7. clipChildren和clipToPadding

    clipChildren 和 clipToPadding clipChild 用于定义子控件是否在父控件边界内进行绘制.clipChild 默认为 true.也就是不允许进行扩展绘制. clipToP ...

  8. word2vec 中的数学原理详解

    word2vec 是 Google 于 2013 年开源推出的一个用于获取 word vector 的工具包,它简单.高效,因此引起了很多人的关注.由于 word2vec 的作者 Tomas Miko ...

  9. Java进击C#——语法之IO操作

    本章简言 上一章我们对线程同步进行讲解.了解如何去处理可能发生的脏数据.而本章就要讲有关于C#在读取IO文件的时候,常常用到的操作类.这一章的内容会比较少.但是笔者还是总结出来让读者们有一个学习的方向 ...

  10. 基于 WebSocket 实现 WebGL 3D 拓扑图实时数据通讯同步(一)

    今天没有延续上一篇讲的内容,穿插一段小插曲,WebSocket 实时数据通讯同步的问题,今天我们并不是很纯粹地讲 WebSocket 相关知识,我们通过 WebGL 3D 拓扑图来呈现一个有趣的 De ...