當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

jQuary总结11:jQuery插件封装---jQuery封装手风琴动画插件

發布時間：2023/12/1 编程问答 25 豆豆

生活随笔收集整理的這篇文章主要介紹了 jQuary总结11:jQuery插件封装---jQuery封装手风琴动画插件小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

完整代碼下載點擊我的GitHub:
https://github.com/XingJYGo/jquery-accordion

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

2 封裝插件目錄結構如下:

主要包括:HTML結構, CCS樣式,JS文件以及jquary庫.

?3 插件封裝步驟如下:

? ?3-1首先,編寫HTML靜態結構:

? ?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文件.

? ?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庫,手風琴插件,開始創建手風琴 .

轉載于:https://www.cnblogs.com/autoXingJY/p/9084521.html

總結

以上是生活随笔為你收集整理的jQuary总结11:jQuery插件封装---jQuery封装手风琴动画插件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。