昨天写了个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;

 }

最新文章

  1. windows forms 上一个类似于wpf snoop 的工具: Hawkeye
  2. Git常用命令整理
  3. 【转】【MySql】Waiting for table metadata lock原因分析
  4. java多线程(二)——锁机制synchronized(同步方法)
  5. 计算几何 平面最近点对 nlogn分治算法 求平面中距离最近的两点
  6. 第四章 Js的面向对象的初窥视(天生的哈希表)
  7. C语言sizeof
  8. Project Euler problem 63
  9. go-common-pool设计原理分析
  10. 利用NSURLSession下载视频，图片，能实现断点续传
  11. 设计模式（1）单例模式（Singleton）
  12. object-fit 解决图片指定大小被压缩问题
  13. C# 特性（Attribute）
  14. Github 开源：使用升讯威 Mapper（ Sheng.Mapper）与 AutoMapper 互补，大幅提高开发效率！
  15. SOJ--Zig-Zag
  16. shell脚本异步日志分析-接口耗时、可用率
  17. mysql 删除重复数据
  18. 关于PHP的mkdir函数
  19. Vuejs——（6）Vuejs与form元素
  20. JQuery：聚焦清空输入框值，失焦恢复默认值

热门文章

  1. 即时通讯App怎样才能火？背后的技术原理，可以从这5个角度切入
  2. CRM项目再分析建表
  3. let‘s encrypt之nginx-https没有小锁
  4. UEFI+GPT与BIOS+MBR各自有什么优缺点？
  5. Dapper入门使用，代替你的DbSQLhelper
  6. 诡异的楼梯（bfs）hdu1180
  7. 华中农业大学第五届程序设计大赛网络同步赛-L
  8. BZOJ5473: 仙人掌
  9. 自定义适用于手机和平板电脑的 Dynamics 365(三)：显示的实体
  10. CUDA(5.5)与MySQL 5.6的rint函数定义冲突引起的VS编译器C2264错误