jQuery fsBanner 手风琴
fsbanner是一款自定义功能丰富的响应式网站Banner手风琴特效jQuery插件。该手风琴特效兼容性很好,支持点击和鼠标滑过等触发事件,并且可添加标题或描述。
在线实例
| 默认 | 带标题 | 鼠标滑过 |
| 带文字介绍 | 带文字介绍(默认隐藏) | onChanged事件 |
使用方法
- <div class='fsbanner' >
- <div style='background-image:url(images/black.jpg)'></div>
- <div style='background-image:url(images/brown.jpg)'></div>
- <div style='background-image:url(images/panda.jpg)'></div>
- <div style='background-image:url(images/polar.jpg)'></div>
- </div>
- $('.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 手风琴的更多相关文章
- jQuery之手风琴图片
<!DOCTYPE HTML> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- jquery多级手风琴插件–accordion.js
手风琴菜单一般用于下拉导航,由于外观非常简洁,使用起来跟手风琴一样可以拉伸和收缩而得名,项目中适当应用手风琴效果会给用户带来非常好的体验.本文借助jQuery插件轻松打造一个非常不错的手风琴效果的菜单 ...
- 简单jQuery 实现手风琴菜单
简单jQuery 实现手风琴菜单 css代码 如下: *{ margin: 0; padding: 0; } #accordion{ width: 500px; } #accordion>div ...
- 基于jquery横向手风琴效果
基于jquery横向手风琴效果是一款基于jquery实现的左右滑动手风琴图片轮播切换特效.效果图如下: 在线预览 源码下载 效果图如下: <div class="flash&quo ...
- 一款基于jquery的手风琴显示详情
今天要各网友分享一款基于jquery的手风琴显示详情实例.当单击顶部箭头的时候,该项以手风琴的形式展示显示详情.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div al ...
- 一款基于jquery的手风琴图片展示效果
今天要给大家分享一款基于jquery的手风琴图片展示效果.这款图片的展示效果鼠标经过前是灰色的,当鼠标经过时图片变大且变为彩色.效果图如下: 在线预览 源码下载 实现的代码. html代码: &l ...
- jQuary总结11:jQuery插件封装---jQuery封装 手风琴 动画插件
完整代码下载点击我的GitHub: https://github.com/XingJYGo/jquery-accordion 1 手风琴的效果展示如下: 2 封装插件目录结构如下: 主要包括:HTML ...
- jquery横向手风琴效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jQuery横向手风琴图片滑块
jQuery横向手风琴图片滑块是一款非常不错的jQuery特效横向手风琴图片滑块插件,可以自动播放,也可以鼠标滑过时切换.+ 欢迎喜欢的朋友下载研究 源码下载页:http://www.huiyi8.c ...
随机推荐
- centos6和centos7防火墙的关闭
CentOS6.5查看防火墙的状态: [zh@localhost ~]$service iptable status 显示结果: [zh@localhost ~]$service iptable st ...
- welcome to my cnblog
博客园总算开通了,以后就分享自己的东西,和大家交流.
- 解决Windows 8.1中所有的应用(Modern App)无法打开(闪退)的问题
我已经在3台电脑上遇到这个问题了,症状是,所有应用商店安装的App都无法打开,包括应用商店本身,在开始界面点击应用以后,应用的Logo一闪而过,然后就消失了,回到了开始界面.查看系统应用日志,会有这样 ...
- DevExpress学习系列(控件篇):GridControl的基本应用
一般属性设置 不显示分组框:Gridview->Option View->Show Group Panel=false 单元格不可编辑:gridcontrol -->gridview ...
- 清除Android工程中没用到的资源
项目需求一改再改,UI一调再调,结果就是项目中一堆已经用不到但却没有清理的垃圾资源,不说工程大小问题,对新进入项目的人或看其他模块的代码的人来说,这些没清理的资源可能也可能会带来困扰,所以最好还是清理 ...
- PHP_02之使用补充
JSON字符串在项目中的应用: ①PHP服务器给客户端JS发送JSON响应数据: PHP: $arr=[...]; echo json_encode($arr); JS: var ob ...
- 【JAVA框架】Hibernate 与Mybatis 区别
Hibernate Mybatis 简介 区别 与联系 欢迎提出见解及转载. 1 简单简介 1.1 Hibernate 框架 Hibernate是一个开放源代码的对象关 ...
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(37)-文章发布系统④-百万级数据和千万级数据简单测试
系列目录 我想测试EF在一百万条数据下的显示时间!这分数据应该有很多同学想要,看看EF的性能! 服务器 现在来向SQL2008R2插入1000000条数据吧 declare @i int; ; beg ...
- KindEditor 给KindEditor赋值
在项目的过程中,使用了KindEditor编辑器,然后在赋值的时候,我的编辑器ID是content,然后我想通过$("#content").html()来赋值,发现赋值失败,后来百 ...
- linux网络设备驱动程序
4.linux网络设备驱动程序体系结构 -------------------------------------- | 数据包发送 | 数据包接收 | ----->网络协议接口层 | dev_ ...