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

PetitQ 手风琴 2018-10-30 1.78K 0 0

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>

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

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

    <div style='background-image:url(images/black.jpg)' />

    <div style='background-image:url(images/brown.jpg)' />

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

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

参数	值	默认值	描述
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 选择器。