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>
複製代碼