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

当前位置:主页 > jQuery库 > 手风琴 > fsBanner-实用的网站响应式Banner手风琴插件
fsBanner-实用的网站响应式Banner手风琴插件
分享:

    插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:2016-01-07
    阅读:
简要教程

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选择器。

fsbanner手风琴插件的github地址为:https://github.com/fiote/fsbanner