封装手风琴!使用jQuery!

 1 //封装手风琴
 2 /**
 3  * 
 4  * 
 5  * 
 6  */
 7 
 8 $.fn.accordion = function (colors, width) {
 9     
10     var width=width||0;
11     var colors= colors||[];
12 
13     $li = this.find("li");
14     var boxWidth = this.width();
15     var avgWidth = boxWidth / $li.length;
16     var maxWidth = boxWidth - ($li.length - 1) * width;
17 
18     //更改li的颜色
19     $li.each(function (i, e) {
20         $(e).css("backgroundColor", colors[i]);
21     });
22 
23     //鼠标进入事件
24     $li.on("mouseenter", function () {
25         $(this).stop().animate({
26             "width": maxWidth
27         }).siblings().stop().animate({
28             "width": width
29         });
30     })
31     //鼠标离开事件
32     $li.on("mouseleave", function () {
33         $li.stop().animate({
34             "width": avgWidth
35         });
36     })
37     return this;
38 }

先提供代码!有时间会更新详细的内容~~~~~~~~~~~

posted @ 2018-08-23 16:39  yaogengzhu  阅读(285)  评论(0编辑  收藏  举报