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 ...
随机推荐
- vim+vundle配置
Linux环境下写代码虽然没有IDE,但通过给vim配置几个插件也足够好用.一般常用的插件主要包括几类,查找文件,查找符号的定义或者声明(函数,变量等)以及自动补全功能.一般流程都是下载需要的工具,然 ...
- Linux上课笔记--随手记Linux命令
初次接触Linux就是感觉这系统不够友好不够人性化,因为首先接触电脑就是win,图形化界面什么操作都可以清晰看到.随着更多的接触越来越发现Linux的强大,虽然我只是一个小白,可我就是爱上他了.现在就 ...
- swift 可选类型(optional)--- swift 入门
一.思维导图 二.代码 //这样无形中就会让代码很丑陋 if x != nil && y != nil { print("x或y都不等于空") } print(&q ...
- 从Maya中把模型搬运至网页的过程
虽然利用threejs来在网页中渲染3d模型不是第一次折腾了,但是还是遇到了各种问题.总结下我所遇到的问题,希望能给正在使用threejs的小伙伴一个帮助. 一.所使用的软件与开发环境 Maya201 ...
- ABP源码分析二十八:ABP.MemoryDB
这个模块简单,且无实际作用.一般实际项目中都有用数据库做持久化,用了数据库就无法用这个MemoryDB 模块了.原因在于ABP限制了UnitOfWork的类型只能有一个(前文以作介绍),一般用了数据库 ...
- Entity Framework 6 Recipes 2nd Edition(10-9)译 -> 在多对多关系中为插入和删除使用存储过程
10-9. 在多对多关系中为插入和删除使用存储过程 问题 想要在一个无载荷的多对多关系中使用存储过程(存储过程只影响关系的连接表) 解决方案 假设有一个多对多关系的作者( Author)表和书籍( B ...
- APUE中fcntl.h的使用及O_SYNC在Mac与Ubuntu下的测试
此部分测试涉及到APUE V3中,第三章的图3-12到图3-14. 通过fcntl.h提供的功能,修改fd的文件属性,本处增加O_SYNC功能,并测试其效果. 本文涉及代码: tree ch3 ch3 ...
- 搭建 windows(7)下Xgboost(0.4)环境 (python,java)以及使用介绍及参数调优
摘要: 1.所需工具 2.详细过程 3.验证 4.使用指南 5.参数调优 内容: 1.所需工具 我用到了git(内含git bash),Visual Studio 2012(10及以上就可以),xgb ...
- HTML5_04之SVG绘图
1.关于Canvas绘制图像: 问题:需要绘制多张图片时,必须等待所有图片加载完成才能开始绘制:而每张图片都是异步请求,彼此没有先后顺序,哪一张先加载完成完全无法预测: 方案: var progres ...
- 前端开发面试题收集(js部分)
1.问:js中"1"+2+"3"+4 运算结果是? 答: js中,字符串和数值相加,得到的还是字符串,这里的结果1234也是字符串. 2.问:4+3+2+&qu ...