fsBanner-实用的网站响应式Banner手风琴插件_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

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

使用方法

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

<link rel="stylesheet" type="text/css" href="css/fsbanner.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/fsbanner.js"></script>

HTML结构

fsBanner手风琴特效插件使用一组<div>元素来制作栈结构的手风琴效果。它的HTML结构类似下面的样子：

<!--list of banners to be stacked -->
<div class='fsbanner'>
    <!-- first banner -->
    <div style='background-image:url(images/black.jpg)' />
      <span class='name'>BLACK</span>
    </div>
    <!-- second banner -->
    <div style='background-image:url(images/brown.jpg)' />
      <span class='name'>BROWN</span>
    </div>
    ......
</div>

你可以添加任意多个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选择器。