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. Mysql 忘记root密码处理办法

    一.更改my.cnf配置文件 1.用命令编辑/etc/my.cnf配置文件,即:vim /etc/my.cnf 或者 vi /etc/my.cnf 2.在[mysqld]下添加skip-grant-t ...

  2. Hadoop

    Hadoop应用场景 Hadoop是专为离线处理和大规模数据分析而设计的,它并不适合那种对几个记录随机读写的在线事务处理模式. 大数据存储:Hadoop最适合一次写入.多次读取的数据存储需求,如数据仓 ...

  3. .Net程序在linux mono环境和WindowsServer上执行测试对比

    最近研究了一下mono,想把windows上写的.Net程序移植到linux上跑.网上有资料说Linux上mono执行.Net程序效率比Windows高,本着实证的态度,只有实际验证过才有说服力. 写 ...

  4. DUILIB入门使用说明整理

    整理自博客上对DUILIB的操作使用的博客文章 一.DuiLib操作入门 1.DuiLib入门简明教程 -- 前言 2.DuiLib入门简明教程 -- VS环境配置 3.DuiLib入门简明教程 -- ...

  5. construction const parameter问题 构造函数const引用参数问题

    工程在window下编译没有任何问题, 但是在linux(CentOS6)下编译就老是报错 C++ 编译器已升级到最新版 6.1.0 错误如下: In file included /bits/stl_ ...

  6. js ajax php分页组件

    github  https://github.com/lihefen/pageList html页面 <!DOCTYPE html><html><head>< ...

  7. springmvc 配置01

    springmvc请求流程与struts比较   1.添加包 com.springsource.org.aopalliance-1.0.0.jarcom.springsource.org.apache ...

  8. 缩放因子和UI设计

    一.PPI 1.像素密度PPI:PPI(Pixel Per Inch by diagonal):表示沿着对角线,每英寸所拥有的像素(Pixel)数目. 根据勾股定理(直角三角形两边为a和b,斜边为c, ...

  9. SQL Server-简单查询语句,疑惑篇(三)

    前言 对于一些原理性文章园中已有大量的文章尤其是关于索引这一块,我也是花费大量时间去学习,对于了解索引原理对于后续理解查询计划和性能调优有很大的帮助,而我们只是一些内容进行概括和总结,这一节我们开始正 ...

  10. 全自动迁移数据库的实现 (Fluent NHibernate, Entity Framework Core)

    在开发涉及到数据库的程序时,常会遇到一开始设计的结构不能满足需求需要再添加新字段或新表的情况,这时就需要进行数据库迁移. 实现数据库迁移有很多种办法,从手动管理各个版本的ddl脚本,到实现自己的mig ...