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

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

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

效果图预览

插件JS

accordionB.js

 ;
 (function ($, window, document, undefined) {
     var defaults = {
         'isajax': false, //是否从ajax加载数据
         'isDom': true, //是否是DOM数据,即直接写在DOM结构中,为默认项
         'isConfiguration': false,//是否是配置数据
         'imglist': [],//配置数据
         'ajaxurl': '',//Ajax()获取数据时的地址
         'isanimate':true,//是否有动画效果
         'sped':,//动画速度
         'showwidth':,//当前选中项的宽度
         'isClear':true,//当鼠标移出DIV时，是否还原初始显示状态
         'firstShow':false//初次加载时，第一项是否展开
     };

     $.fn.nhsdAccordion = function (options) {
         var $parentDiv = $(this);
         var $opts = $.extend({}, defaults, options);
         var $mouseoverTile = "";
         var $a_width = parseInt($parentDiv.width());
         if($opts.isanimate==true){
             $a_width = $a_width-;//尽可能的保证样式的正确性
         }
         var $quantity;//li的数量
         var $p_width;//收缩时的平均宽度
         var $o_width;//当一个展开时，剩下的项li的平均宽度
         var $cli;//记录当前选中项

         function initDom() {
             $parentDiv.html("");
             $p_width = $a_width/$quantity;
             $o_width = ($a_width-parseInt($opts.showwidth))/($quantity-);

             var $ul = $('<ul></ul>', { 'class': 'acdul' }).appendTo($parentDiv);
             for (var i = , j = $opts.imglist.length; i < j; i++) {
                 var temp = $opts.imglist[i];
                 var $li;
                 if($opts.firstShow==true){
                     if(i==){
                         $li = $('<li></li>').css({
                             width:$opts.showwidth+'px'
                         }).appendTo($ul);
                     }else{
                         $li = $('<li></li>').css({
                             width:$o_width+'px'
                         }).appendTo($ul);
                     }
                 }
                 else{
                     $li = $('<li></li>').css({
                         width:$p_width+'px'
                     }).appendTo($ul);
                 }
                 var $img = $('<img />', { 'src': temp.src, 'title': temp.title }).appendTo($li);
                 var $tit = $('<span class="pspan"></span>').html(temp.title).appendTo($li);
             }
             liEvent();
         }

         function liEvent() {
             $(".acdul li").bind("click mouseover", function () {
                 $mouseoverTile = $(this).find('img').attr('title');
                 $(this).find('img').removeAttr('title');
                 if($opts.isanimate==true){
                     $(this).siblings('li').stop(true,false).animate({width:$o_width+'px'},$opts.sped);
                     $(this).stop(true,false).animate({width:$opts.showwidth+'px'},$opts.sped);
                 }else{
                     $(this).siblings('li').attr('style','width:'+$o_width+'px');
                     $(this).attr('style','width'+$opts.showwidth+'px');
                 }
                 $(this).find('span').removeClass().addClass('cspan');
                 $cli = $(this);
             }).bind('mouseout', function () {
                 $(this).find('img').attr('title', $mouseoverTile);
                 $(this).find('span').removeClass().addClass('pspan')
             });

             $parentDiv.bind('mouseout',function(){
                 if($opts.isClear){
                     if($opts.isanimate==true){
                         $(this).find('ul li').stop(true,false).animate({width:$p_width+'px'},$opts.sped);
                     }else{
                         $(this).find('ul li').css({
                             width:$p_width+'px'
                         });
                     }
                 }else{
                     $(this).find('span').removeClass().addClass('pspan');
                     $cli.find('span').removeClass().addClass('cspan');
                 }
             });
         }

         function initAjax() {
             $.ajax({
                 type: 'get',
                 url: $opts.ajaxurl,
                 cache: false,
                 dataType: 'json',
                 beforeSend: function () { },
                 success: function (d) {
                     $opts.imglist = d;
                     $quantity = d.length;
                     initDom();
                 },
                 error: function () { }
             });
         }

         if ($opts.isajax == true) {
             initAjax();
         } else if ($opts.isConfiguration == true) {
             $quantity = $opts.imglist.length;
             initDom();
         } else if ($opts.isDom == true) {
             $quantity = $parentDiv.find('li').length;
             $p_width = $a_width/$quantity;
             $o_width = ($a_width-parseInt($opts.showwidth))/($quantity-);
             liEvent();
         }

         return this;//用于保证当前元素还能实现链式编程
     }
 })(jQuery, window, document);

CSS样式

accordionB.css

 /* CSS Document */

 /*手风琴效果CSS*/
 .accordionDiv {
 /*    width: 658px;*/
 /*    width: 400px;*/
     width: 500px;
     height: 400px;
     margin: 0 auto;
     position: relative;
     overflow: hidden;
     top: 50px;
 }

 .acdul {
     position: absolute;
 }

     .acdul li {
         display: inline-block;
         float: left;
         cursor: pointer;
         position: relative;
         overflow: hidden;
         font-size: 20px;
         font-weight: bold;
     }

     .pspan{
         color: #ffffff;
         height: 100%;
     }
     .cspan{
         color: red;
         height: 100%;
     }

     .acdul img {
         float: left;
         position: relative;
         display: inline-block;
     }

     .acdul span {
         float: left;
         position: absolute;
         display: block;
         width: 22px;
         margin: 5px 0 0 5px;
         z-index:;
     }

     .redspan{
         color:red;
     }

     .laselirevise{

     }

HTML页面

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta name="viewport" http-equiv="Content-Type" content="charset=utf-8" />
 <title>无标题文档</title>
 <link rel="stylesheet" type="text/css" href="../CSS/global.css"/>
 <link rel="stylesheet" type="text/css" href="../CSS/accordionB.css"/>
 <script type="text/javascript" src="../Script/jquery-1.9.1.min.js"></script>
 <script type="text/javascript" src="../Script/accordionB.js"></script>
 <script type="text/javascript">
         $(document).ready(function () {
            var dataimglist = [
                     {
                         'title':'手风琴效果图一',
                         'src':'../Images/accordion/1.png',
                         'href':'http://www.cnblogs.com/nhsd/'
                     }, {
                         'title': '手风琴效果图二',
                         'src': '../Images/accordion/2.png',
                         'href':'http://www.cnblogs.com/nhsd/'
                     }, {
                         'title': '手风琴效果图三',
                         'src': '../Images/accordion/3.png',
                         'href':'http://www.cnblogs.com/nhsd/'
                     }, {
                         'title': '手风琴效果图四',
                         'src': '../Images/accordion/4.png',
                         'href':'http://www.cnblogs.com/nhsd/'
                     }, {
                         'title': '手风琴效果图五',
                         'src': '../Images/accordion/5.png',
                         'href':'http://www.cnblogs.com/nhsd/'
                     }, {
                         'title': '手风琴效果图六',
                         'src': '../Images/accordion/6.png',
                         'href':'http://www.cnblogs.com/nhsd/'
                     }
             ];

             $("#accordionDiv").nhsdAccordion({
                 'imglist': dataimglist, 'interval': 'slow','isConfiguration':true
             });
             //上面是把数据写在配置项中
             //这是直接写在DOM结构中
             //$("#accordionDiv").nhsdAccordion({});
             //下面是从Ajax()中获取数据的形式,ajaxur后跟的是获取数据源地址
             //$("#accordionDiv").nhsdAccordion({'ajaxur':'/plug/accordiionB/'});
         });
 </script>
 </head>
 <body>
     <div>
         <div id="accordionDiv" class="accordionDiv">
            <ul class="acdul">
                <li style="width: 83px;">
                     <img src="../Images/accordion/1.png" title="手风琴效果图一">
                     <span class="pspan">手风琴效果图一</span>
                </li>
                <li style="width: 83px;">
                    <img src="../Images/accordion/2.png" title="手风琴效果图二">
                    <span class="pspan">手风琴效果图二</span>
                </li>
                <li style="width: 83px;">
                     <img src="../Images/accordion/3.png" title="手风琴效果图三">
                     <span class="pspan">手风琴效果图三</span>
                </li>
                <li style="width: 83px;">
                   <img src="../Images/accordion/4.png" title="手风琴效果图四">
                   <span class="pspan">手风琴效果图四</span>
                </li>
                <li style="width: 83px;">
                   <img src="../Images/accordion/5.png" title="手风琴效果图五">
                   <span class="pspan">手风琴效果图五</span>
                </li>
                <li style="width: 83px;">
                   <img src="../Images/accordion/6.png" title="手风琴效果图六">
                   <span class="pspan">手风琴效果图六</span>
                </li>
            </ul>
         </div>
     </div>
 </body>
 </html>

另global.css

 * {
     margin:;
     padding:;
 }

 html, body {
     color: #000;
     background: #fff;
 }

 p {
     display: block;
     -webkit-margin-before: 1em;
     -webkit-margin-after: 1em;
     -webkit-margin-start: 0px;
     -webkit-margin-end: 0px;
 }

 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 {
     margin:;
     padding:;
     list-style: none;
 }

 div {
     display: block;
 }

 a {
     text-decoration: none;
     color: #333;
 }

     a:hover {
         color: #14a0cd;
         text-decoration: underline;
     }

 img {
     border: none;
     line-height:;
     margin:;
     padding:;
     vertical-align: bottom;
 }

 table {
     border-collapse: collapse;
 }
 /*td {
 padding: 3px;
 }*/
 input {
     padding: 1px;
     vertical-align: middle;
     line-height: normal;
 }

 a:link, a:visited {
     text-decoration: none;
     color: #1F376D;
 }

 a:hover, a:active {
     text-decoration: underline;
     color: #BD0A01;
     border: none;
 }

 ul {
     clear: both;
     overflow: hidden;
     width: 100%;
 }

 ul, li {
     list-style: none;
 }