jQuery插件实例五：手风琴效果[动画效果可配置版]

昨天写了个jQuery插件实例四：手风琴效果[无动画版]那个是没有动画效果的，且可配置性不高，本篇为有动画效果。对于一些数据做了动态的计算，以实现自适应。

欢迎大家入群258387392相互交流，学习，新群初建，欢迎各位的光临

效果图预览

插件JS

accordionB.js

  1 ;

  2 (function ($, window, document, undefined) {

  3     var defaults = {

  4         'isajax': false, //是否从ajax加载数据

  5         'isDom': true, //是否是DOM数据,即直接写在DOM结构中,为默认项

  6         'isConfiguration': false,//是否是配置数据

  7         'imglist': [],//配置数据

  8         'ajaxurl': '',//Ajax()获取数据时的地址

  9         'isanimate':true,//是否有动画效果

 10         'sped':100,//动画速度

 11         'showwidth':252,//当前选中项的宽度

 12         'isClear':true,//当鼠标移出DIV时，是否还原初始显示状态

 13         'firstShow':false//初次加载时，第一项是否展开

 14     };

 15 

 16     $.fn.nhsdAccordion = function (options) {

 17         var $parentDiv = $(this);

 18         var $opts = $.extend({}, defaults, options);

 19         var $mouseoverTile = "";

 20         var $a_width = parseInt($parentDiv.width());

 21         if($opts.isanimate==true){

 22             $a_width = $a_width-2;//尽可能的保证样式的正确性

 23         }

 24         var $quantity;//li的数量

 25         var $p_width;//收缩时的平均宽度

 26         var $o_width;//当一个展开时，剩下的项li的平均宽度

 27         var $cli;//记录当前选中项

 28 

 29         function initDom() {

 30             $parentDiv.html("");

 31             $p_width = $a_width/$quantity;

 32             $o_width = ($a_width-parseInt($opts.showwidth))/($quantity-1);

 33             

 34             var $ul = $('<ul></ul>', { 'class': 'acdul' }).appendTo($parentDiv);

 35             for (var i = 0, j = $opts.imglist.length; i < j; i++) {

 36                 var temp = $opts.imglist[i];

 37                 var $li;

 38                 if($opts.firstShow==true){

 39                     if(i==0){

 40                         $li = $('<li></li>').css({

 41                             width:$opts.showwidth+'px'

 42                         }).appendTo($ul);

 43                     }else{

 44                         $li = $('<li></li>').css({

 45                             width:$o_width+'px'

 46                         }).appendTo($ul);

 47                     }

 48                 }

 49                 else{

 50                     $li = $('<li></li>').css({

 51                         width:$p_width+'px'

 52                     }).appendTo($ul);

 53                 }

 54                 var $img = $('<img />', { 'src': temp.src, 'title': temp.title }).appendTo($li);

 55                 var $tit = $('<span class="pspan"></span>').html(temp.title).appendTo($li);

 56             }

 57             liEvent();

 58         }

 59 

 60         function liEvent() {

 61             $(".acdul li").bind("click mouseover", function () {

 62                 $mouseoverTile = $(this).find('img').attr('title');

 63                 $(this).find('img').removeAttr('title');

 64                 if($opts.isanimate==true){

 65                     $(this).siblings('li').stop(true,false).animate({width:$o_width+'px'},$opts.sped);

 66                     $(this).stop(true,false).animate({width:$opts.showwidth+'px'},$opts.sped);

 67                 }else{

 68                     $(this).siblings('li').attr('style','width:'+$o_width+'px');

 69                     $(this).attr('style','width'+$opts.showwidth+'px');

 70                 }

 71                 $(this).find('span').removeClass().addClass('cspan');

 72                 $cli = $(this);

 73             }).bind('mouseout', function () {

 74                 $(this).find('img').attr('title', $mouseoverTile);

 75                 $(this).find('span').removeClass().addClass('pspan')

 76             });

 77             

 78             $parentDiv.bind('mouseout',function(){

 79                 if($opts.isClear){

 80                     if($opts.isanimate==true){

 81                         $(this).find('ul li').stop(true,false).animate({width:$p_width+'px'},$opts.sped);

 82                     }else{

 83                         $(this).find('ul li').css({

 84                             width:$p_width+'px'

 85                         });

 86                     }

 87                 }else{

 88                     $(this).find('span').removeClass().addClass('pspan');

 89                     $cli.find('span').removeClass().addClass('cspan');

 90                 }

 91             });

 92         }

 93 

 94         function initAjax() {

 95             $.ajax({

 96                 type: 'get',

 97                 url: $opts.ajaxurl,

 98                 cache: false,

 99                 dataType: 'json',

100                 beforeSend: function () { },

101                 success: function (d) {

102                     $opts.imglist = d;

103                     $quantity = d.length;

104                     initDom();

105                 },

106                 error: function () { }

107             });

108         }

109         

110         if ($opts.isajax == true) {

111             initAjax();

112         } else if ($opts.isConfiguration == true) {

113             $quantity = $opts.imglist.length;

114             initDom();

115         } else if ($opts.isDom == true) {

116             $quantity = $parentDiv.find('li').length;

117             $p_width = $a_width/$quantity;

118             $o_width = ($a_width-parseInt($opts.showwidth))/($quantity-1);

119             liEvent();

120         }

121 

122         return this;//用于保证当前元素还能实现链式编程

123     }

124 })(jQuery, window, document);

CSS样式

accordionB.css

 1 /* CSS Document */

 2 

 3 /*手风琴效果CSS*/

 4 .accordionDiv {

 5 /*    width: 658px;*/

 6 /*    width: 400px;*/

 7     width: 500px;

 8     height: 400px;

 9     margin: 0 auto;

10     position: relative;

11     overflow: hidden;

12     top: 50px;

13 }

14 

15 .acdul {

16     position: absolute;

17 }

18 

19     .acdul li {

20         display: inline-block;

21         float: left;

22         cursor: pointer;

23         position: relative;

24         overflow: hidden;

25         font-size: 20px;

26         font-weight: bold;

27     }

28     

29     .pspan{

30         color: #ffffff;

31         height: 100%;

32     }

33     .cspan{

34         color: red;

35         height: 100%;

36     }

37 

38     .acdul img {

39         float: left;

40         position: relative;

41         display: inline-block;

42     }

43 

44     .acdul span {

45         float: left;

46         position: absolute;

47         display: block;

48         width: 22px;

49         margin: 5px 0 0 5px;

50         z-index: 100;

51     }

52 

53     .redspan{

54         color:red;

55     }

56     

57     .laselirevise{

58     

59     }

HTML页面

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 2 <html xmlns="http://www.w3.org/1999/xhtml">

 3 <head>

 4 <meta name="viewport" http-equiv="Content-Type" content="charset=utf-8" />

 5 <title>无标题文档</title>

 6 <link rel="stylesheet" type="text/css" href="../CSS/global.css"/>

 7 <link rel="stylesheet" type="text/css" href="../CSS/accordionB.css"/>

 8 <script type="text/javascript" src="../Script/jquery-1.9.1.min.js"></script>

 9 <script type="text/javascript" src="../Script/accordionB.js"></script>

10 <script type="text/javascript">

11         $(document).ready(function () {

12            var dataimglist = [

13                     {

14                         'title':'手风琴效果图一',

15                         'src':'../Images/accordion/1.png',

16                         'href':'http://www.cnblogs.com/nhsd/'

17                     }, {

18                         'title': '手风琴效果图二',

19                         'src': '../Images/accordion/2.png',

20                         'href':'http://www.cnblogs.com/nhsd/'

21                     }, {

22                         'title': '手风琴效果图三',

23                         'src': '../Images/accordion/3.png',

24                         'href':'http://www.cnblogs.com/nhsd/'

25                     }, {

26                         'title': '手风琴效果图四',

27                         'src': '../Images/accordion/4.png',

28                         'href':'http://www.cnblogs.com/nhsd/'

29                     }, {

30                         'title': '手风琴效果图五',

31                         'src': '../Images/accordion/5.png',

32                         'href':'http://www.cnblogs.com/nhsd/'

33                     }, {

34                         'title': '手风琴效果图六',

35                         'src': '../Images/accordion/6.png',

36                         'href':'http://www.cnblogs.com/nhsd/'

37                     }

38             ];

39 

40             $("#accordionDiv").nhsdAccordion({

41                 'imglist': dataimglist, 'interval': 'slow','isConfiguration':true

42             });

43             //上面是把数据写在配置项中

44             //这是直接写在DOM结构中

45             //$("#accordionDiv").nhsdAccordion({});

46             //下面是从Ajax()中获取数据的形式,ajaxur后跟的是获取数据源地址

47             //$("#accordionDiv").nhsdAccordion({'ajaxur':'/plug/accordiionB/'});

48         });

49 </script>

50 </head>

51 <body>

52     <div>

53         <div id="accordionDiv" class="accordionDiv">

54            <ul class="acdul">

55                <li style="width: 83px;">

56                     <img src="../Images/accordion/1.png" title="手风琴效果图一">

57                     <span class="pspan">手风琴效果图一</span>

58                </li>

59                <li style="width: 83px;">

60                    <img src="../Images/accordion/2.png" title="手风琴效果图二">

61                    <span class="pspan">手风琴效果图二</span>

62                </li>

63                <li style="width: 83px;">

64                     <img src="../Images/accordion/3.png" title="手风琴效果图三">

65                     <span class="pspan">手风琴效果图三</span>

66                </li>

67                <li style="width: 83px;">

68                   <img src="../Images/accordion/4.png" title="手风琴效果图四">

69                   <span class="pspan">手风琴效果图四</span>

70                </li>

71                <li style="width: 83px;">

72                   <img src="../Images/accordion/5.png" title="手风琴效果图五">

73                   <span class="pspan">手风琴效果图五</span>

74                </li>

75                <li style="width: 83px;">

76                   <img src="../Images/accordion/6.png" title="手风琴效果图六">

77                   <span class="pspan">手风琴效果图六</span>

78                </li>

79            </ul>

80         </div>

81     </div>

82 </body>

83 </html>

另global.css

 1 * {

 2     margin: 0;

 3     padding: 0;

 4 }

 5 

 6 html, body {

 7     color: #000;

 8     background: #fff;

 9 }

10 

11 p {

12     display: block;

13     -webkit-margin-before: 1em;

14     -webkit-margin-after: 1em;

15     -webkit-margin-start: 0px;

16     -webkit-margin-end: 0px;

17 }

18 

19 body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td {

20     margin: 0;

21     padding: 0;

22     list-style: none;

23 }

24 

25 div {

26     display: block;

27 }

28 

29 a {

30     text-decoration: none;

31     color: #333;

32 }

33 

34     a:hover {

35         color: #14a0cd;

36         text-decoration: underline;

37     }

38 

39 img {

40     border: none;

41     line-height: 0;

42     margin: 0;

43     padding: 0;

44     vertical-align: bottom;

45 }

46 

47 table {

48     border-collapse: collapse;

49 }

50 /*td {

51 padding: 3px;

52 }*/

53 input {

54     padding: 1px;

55     vertical-align: middle;

56     line-height: normal;

57 }

58 

59 a:link, a:visited {

60     text-decoration: none;

61     color: #1F376D;

62 }

63 

64 a:hover, a:active {

65     text-decoration: underline;

66     color: #BD0A01;

67     border: none;

68 }

69 

70 ul {

71     clear: both;

72     overflow: hidden;

73     width: 100%;

74 }

75 

76 ul, li {

77     list-style: none;

78 }