完整代码下载点击我的GitHub:
https://github.com/XingJYGo/jquery-accordion

1 手风琴的效果展示如下:

2 封装插件目录结构如下:

主要包括:HTML结构, CCS样式,JS文件以及jquary库.

3 插件封装步骤如下:

3-1首先,编写HTML静态结构:

<div id="box">
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

3-2 然后设置CSS的手风琴样式

* {
  margin: 0;
  padding: 0;
  list-style: none;
}

div {
  width: 1200px;
  height: 400px;
  border: 2px solid #000;
  margin: 100px auto;
}

ul {
  width: 1300px;
}

li {
  /*width: 240px;*/
  height: 400px;
  float: left;

}

3-3抽取CSS样式到jquery-accordion.css,HTML文件导入CSS样式.

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" href="jquery-accordion.css">
</head>

4 js中的代码书写

4-1 首先导入jquary库和手风琴插件的js文件.

<script src="jquery-1.12.4.js"></script>
<script src="jquery.accordion.js"></script>

4-2 编写手风琴插件js文件:

手风琴插件的核心需求有:

1 .动态添加颜色的需求,以及动态计算盒子的宽度

2 .找到里面所有的li,给li注册鼠标移入事件

3. 找到最外面的大盒子,给大盒子注册鼠标移出事件

4 .自定义创建颜色对象,遍历添加颜色属性.

由于要使用jquery对象调用,所以方法要加载jquery的原型上:

所有的方法都要包含于这个函数内:

$.fn.accordion = function(obj){

}
  //动态的计算每一个li的宽度
  // box的宽度 / 里面li的数量
  var width = this.innerWidth() / this.find('li').length; //计算宽度
  this.find('li').width(width); //给每一个li赋值宽度
  //处理一下用户传递进来的参数
  obj.maxWidth = obj.maxWidth > 1000 ? 1000 : obj.maxWidth;

  //计算其他盒子的宽度
  // (整个box的宽度- 当前li的宽度) / (this.find('li').length - 1)
  var minWidth = (this.innerWidth() - obj.maxWidth) / (this.find('li').length - 1);

  //一旦调用方法,就把颜色传递进来
  this.find('li').each(function(index, item)
   //给每一个li加背景颜色
    $(item).css('backgroundColor', obj.colors[index]);
  })
 //1.找到里面所有的li,给li注册鼠标移入事件
  this.find('li').on('mouseenter', function(){
    $(this).stop(true).animate({width:obj.maxWidth}).siblings()
      .stop(true).animate({width: minWidth});
  });
//  2. 找到最外面的大盒子,给大盒子注册鼠标移出事件
  this.on('mouseleave', function(){
    $(this).find('li').stop(true).animate({width : width});
  });

5 最后,导入jQuery库,手风琴插件,开始创建手风琴 .

<script src="jquery-1.12.4.js"></script>
<script src="jquery.accordion.js"></script>
<script>

  $('#box').accordion({
    colors:['red','green','blue', 'yellow', 'pink'],
    maxWidth: 800
  });
</script>

jQuary总结11:jQuery插件封装---jQuery封装 手风琴 动画插件的更多相关文章

  1. 基于jQuery的时间轴鼠标悬停动画插件

    之前为大家分享了很多jquery插件,这次我们要来分享一款不太常见的jQuery插件,它是一个时间轴,时间轴上的每一个点在鼠标滑过时都可以显示该点的描述信息,并且鼠标滑过时都可以产生一定的动画特效,比 ...

  2. 封装jQuery插件的步骤

    引语:jQuery提供了很多插件,我们在开发的过程使用插件能节省时间简化开发也避免从头开始编写每个组件,单我们除了懂得使用别人已编写好的插件以外,也到懂得如何封装属于我们自己的插件,以下就是封装jQu ...

  3. 封装jquery插件

    最近要到使用别的jquery插件,但部分功能并不能满足,为满足功能,只能对插件进行修改来满足,要修改插件,先要了解插件如何封装, 明白了如何封装插件,才能更好修改插件:如何封装插件? 1.插件封装类型 ...

  4. jQuery extend 实现代码封装

    jQuery 有两种方式封装代码 $.extend 和 $.fn.extend,我们也称为封装插件 $.extend DEMO // 封装 $.extend({ say:function(option ...

  5. 原生态AJAX详解和jquery对AJAX的封装

    AJAX: A :Asynchronous [eI`sinkrenes] 异步 J :JavaScript    JavaScript脚本语言 A: And X :XML 可扩展标记语言 AJAX现在 ...

  6. 封装Jquery 合并table中任何同列数据

    封装代码: jQuery.fn.rowspan = function (colIdx) { //封装JQuery同列值相同合并小插件 return this.each(function () { va ...

  7. 使用DOM的方法获取所有li元素，然后使用jQuery()构造函数把它封装为jQuery对象

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. jQuery Ajax 二次封装

    jQuery Ajax通用js封装 第一步:引入jQuery库 <script type="text/javascript" src="<%=path%> ...

  9. Ajax请求Session超时的解决办法：拦截器 + 封装jquery的post方法

    目标:前端系统,后端系统等,统一处理Session超时和系统错误的问题. 可能需要处理的问题:Session超时.系统500错误.普通的业务错误.权限不足. 同步请求:            Sess ...

随机推荐

  1. 你知道的，javascript语言的执行环境是"单线程模式"，这种模式的好处是实现起来比较简单，执行环境相对单纯；坏处是只要有一个任务耗时很长，后面的任务都必须排队等着，会拖延整个程序的执行，因此很多时候需要进行“异步模式”，请列举js异步编程的方法。

    回调函数,这是异步编程最基本的方法. 事件监听,另一种思路是采用事件驱动模式.任务的执行不取决于代码的顺序,而取决于某个事件是否发生. 发布/订阅,上一节的"事件",完全可以理解成 ...

  2. j2EE框架collection

    在 Java2中,有一套设计优良的接口和类组成了Java集合框架Collection,使程序员操作成批的数据或对象元素极为方便.这些接口和类有很多对抽象数据类型操作的API,而这是我们常用的且在数据结 ...

  3. python开发_python中的变量：全局变量和局部变量

    如果你在为python中的变量:全局变量和局部变量头疼,我想这篇blog会给你帮助 运行效果: 代码部分: #Python中的变量:全局变量和局部变量 #在很多语言中,在声明全局变量的时候,都喜欢把全 ...

  4. svn ignore 的用法（忽略文件及目录）

    svn ignore 的用法(忽略文件及目录) 若想创建了一个文件夹,并且把它加入版本控制,但忽略文件夹中的所有文件的内容: $ svn mkdir spool $ svn propset svn:i ...

  5. MySQL查看用户权限的两种方法

    http://yanue.net/post-96.html MySQL查看用户权限命令的两方法: 一. 使用MySQL grants MySQL grant详细用法见:http://yanue.net ...

  6. SqlServer 获得存储过程的返回值（参数返回），别玩了output

    declare @dingdanid int declare @fanhuizhi int set @dingdanid = 1 exec 检测订单出库资格 @dingdanid ,@fanhuizh ...

  7. Dijkstra 调度场算法 Python实现 一

    调度场算法(Shunting Yard Algorithm)是一个用于将中缀表达式转换为后缀表达式的经典算法,由 Edsger Wybe Dijkstra 引入,因其操作类似于火车编组场而得名.  — ...

  8. IOS省电

    1.关闭定位 2.关闭后台刷新

  9. js 的eval()方法 计算某个字符串，并执行其中的的 JavaScript 代码;

    定义和用法 eval() 函数可计算某个字符串,并执行其中的的 JavaScript 代码. 语法 eval(string) 参数 描述 string 必需.要计算的字符串,其中含有要计算的 Java ...

  10. MongoDB数据仓储

    本篇是作为另一篇随笔的一部分‘搭建一个Web API项目’ MogonDB官网:https://www.mongodb.org/ 安装过程参考园友的分享http://www.cnblogs.com/l ...