转载

fsBanner-实用的网站响应式Banner手风琴插件

简要教程

fsbanner是一款非常实用的响应式网站Banner手风琴特效jQuery插件。该手风琴特效兼容IE8浏览器，支持点击和鼠标滑过2种模式，并且可以制作图片的描述信息效果。

查看演示 下载插件

使用方法

使用该手风琴特效需要引入jQuery和fsbanner.js以及fsbanner.css文件。

HTML结构

fsBanner手风琴特效插件使用一组

元素来制作栈结构的手风琴效果。它的HTML结构类似下面的样子：

BLACK

BROWN

......

你可以添加任意多个Banner，带.name class的span元素可以省略，另外你也可以添加一些其它的span元素，具体请参考它的参数选项。

初始化插件

在页面DOM元素加载完毕之后，可以通过fsBanner()方法来初始化该手风琴插件。

$('.fsbanner').fsBanner(options);

配置参数

参数	值	默认值	描述
showName	true / false	true	如果设置为true， `.name` 元素将被显示在Banner的左下方
trigger	click / mouse	click	使用哪种方式来触发手风琴的展开和收缩
toUpdate	hash	{}	当你展开一个Banner的时候，脚本会从它的HTML元素中的span元素中获取信息。你可以通过这个选项来使用这些值去更新其它元素。
whenEmpty	hash	{}	当没有Banner展开的时候（初始化时或重置banner宽度的时候），就不会有消息显示在toUpdate选项中指定的元素中。
hideParent	selector	null	如果设置了该选项，whenEmpty参数将被忽略。当没有banner同时又设置了hideParent的时候，脚本将隐藏传入的选择器元素。
onChanged	function	null	当banner被展开的时候该函数将被触发。它接收2个参数：展开的banner和之前展开的banner。这些参数是jQuery选择器。