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 }

 

 

 

 

 

 

posted @ 2014-06-05 10:06  年华时代  阅读(625)  评论(2)  编辑  收藏  举报