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. centos6和centos7防火墙的关闭

    CentOS6.5查看防火墙的状态: [zh@localhost ~]$service iptable status 显示结果: [zh@localhost ~]$service iptable st ...

  2. welcome to my cnblog

    博客园总算开通了,以后就分享自己的东西,和大家交流.

  3. 解决Windows 8.1中所有的应用(Modern App)无法打开(闪退)的问题

    我已经在3台电脑上遇到这个问题了,症状是,所有应用商店安装的App都无法打开,包括应用商店本身,在开始界面点击应用以后,应用的Logo一闪而过,然后就消失了,回到了开始界面.查看系统应用日志,会有这样 ...

  4. DevExpress学习系列(控件篇):GridControl的基本应用

    一般属性设置 不显示分组框:Gridview->Option View->Show Group Panel=false 单元格不可编辑:gridcontrol -->gridview ...

  5. 清除Android工程中没用到的资源

    项目需求一改再改,UI一调再调,结果就是项目中一堆已经用不到但却没有清理的垃圾资源,不说工程大小问题,对新进入项目的人或看其他模块的代码的人来说,这些没清理的资源可能也可能会带来困扰,所以最好还是清理 ...

  6. PHP_02之使用补充

    JSON字符串在项目中的应用: ①PHP服务器给客户端JS发送JSON响应数据:  PHP:   $arr=[...];   echo json_encode($arr);  JS:   var ob ...

  7. 【JAVA框架】Hibernate 与Mybatis 区别

    Hibernate Mybatis 简介 区别 与联系 欢迎提出见解及转载. 1 简单简介     1.1    Hibernate 框架          Hibernate是一个开放源代码的对象关 ...

  8. ASP.NET MVC5+EF6+EasyUI 后台管理系统(37)-文章发布系统④-百万级数据和千万级数据简单测试

    系列目录 我想测试EF在一百万条数据下的显示时间!这分数据应该有很多同学想要,看看EF的性能! 服务器 现在来向SQL2008R2插入1000000条数据吧 declare @i int; ; beg ...

  9. KindEditor 给KindEditor赋值

    在项目的过程中,使用了KindEditor编辑器,然后在赋值的时候,我的编辑器ID是content,然后我想通过$("#content").html()来赋值,发现赋值失败,后来百 ...

  10. linux网络设备驱动程序

    4.linux网络设备驱动程序体系结构 -------------------------------------- | 数据包发送 | 数据包接收 | ----->网络协议接口层 | dev_ ...