昨天写了个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 $opts.showwidth+'px' 42 }).appendTo($ul); 43 }else{ 44 $li = $('<li></li>').css({ 45 $o_width+'px' 46 }).appendTo($ul); 47 } 48 } 49 else{ 50 $li = $('<li></li>').css({ 51 $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({$o_width+'px'},$opts.sped); 66 $(this).stop(true,false).animate({$opts.showwidth+'px'},$opts.sped); 67 }else{ 68 $(this).siblings('li').attr('style',''+$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({$p_width+'px'},$opts.sped); 82 }else{ 83 $(this).find('ul li').css({ 84 $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 /* 658px;*/ 6 /* 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=" 83px;"> 56 <img src="../Images/accordion/1.png" title="手风琴效果图一"> 57 <span class="pspan">手风琴效果图一</span> 58 </li> 59 <li style=" 83px;"> 60 <img src="../Images/accordion/2.png" title="手风琴效果图二"> 61 <span class="pspan">手风琴效果图二</span> 62 </li> 63 <li style=" 83px;"> 64 <img src="../Images/accordion/3.png" title="手风琴效果图三"> 65 <span class="pspan">手风琴效果图三</span> 66 </li> 67 <li style=" 83px;"> 68 <img src="../Images/accordion/4.png" title="手风琴效果图四"> 69 <span class="pspan">手风琴效果图四</span> 70 </li> 71 <li style=" 83px;"> 72 <img src="../Images/accordion/5.png" title="手风琴效果图五"> 73 <span class="pspan">手风琴效果图五</span> 74 </li> 75 <li style=" 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 }