jQuery插件封装---jQuery封装手风琴动画插件

时间 2019-11-17

标签 jquery 插件封装手风琴动画栏目 JQuery 繁體版

原文原文链接

完整代码下载点击个人GitHub:
https://github.com/XingJYGo/jquery-accordioncss

1 手风琴的浏览器展现以下:jquery

2 封装插件目录结构以下:git

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

3 插件封装步骤以下:浏览器

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

<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样式.ui

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

4 js中的代码书写this

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

<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>
复制代码

jQuery插件封装---jQuery封装 手风琴 动画插件

jQuery插件封装---jQuery封装手风琴动画插件