手风琴效果就是内容的折叠与打开，在这个插件中，使用了三种数据来源：1、直接写在DOM结构中；2、将数据写在配置项中；3、从Ajax()中获取数据。在这一版中，各项的切换没有添加动画效果，在下一版中会是有动画效果的。
在这个插件中，CSS和JS的配置非常重要，需要特别注意。另外，加个思考，请先看完后再想这个问题：当点击其中某项时，给width直接添加animate是否合适，当快速在其上移动时，如何保证效果？
效果图预览
插件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': '' 9 }; 10 11 $.fn.nhsdAccordion = function (options) { 12 var $parentDiv = $(this); 13 var $opts = $.extend({}, defaults, options); 14 var $mouseoverTile = ""; 15 16 function initDom() { 17 $parentDiv.html(""); 18 var $ul = $('<ul></ul>', { 'class': 'acdul' }).appendTo($parentDiv); 19 for (var i = 0, j = $opts.imglist.length; i < j; i++) { 20 var temp = $opts.imglist[i]; 21 var $li; 22 if (i == 0) { 23 $li = $('<li></li>', { 'style': '252px' }).appendTo($ul); 24 } else { 25 $li = $('<li></li>', { 'style': '79px' }).appendTo($ul); 26 } 27 var $img = $('<img />', { 'src': temp.src, 'title': temp.title }).appendTo($li); 28 var $tit = $('<span></span>').html(temp.title).appendTo($li); 29 } 30 liEvent(); 31 } 32 33 function liEvent() { 34 $(".acdul li").bind("click", function () { 35 $mouseoverTile = $(this).find('img').attr('title'); 36 $(this).find('img').removeAttr('title'); 37 $(this).parent().find('li').attr('style', '80px'); 38 $(this).attr('style', '252px'); 39 }).bind('mouseout', function () { 40 $(this).find('img').attr('title', $mouseoverTile); 41 }); 42 } 43 44 function initAjax() { 45 $.ajax({ 46 type: 'get', 47 url: $opts.ajaxurl, 48 cache: false, 49 dataType: 'json', 50 beforeSend: function () { }, 51 success: function (d) { 52 $opts.imglist = d; 53 initDom(); 54 }, 55 error: function () { } 56 }); 57 } 58 59 if ($opts.isajax == true) { 60 initAjax(); 61 } else if ($opts.isConfiguration == true) { 62 initDom(); 63 } else if ($opts.isDom == true) { 64 liEvent(); 65 } 66 67 return this; 68 } 69 })(jQuery, window, document);
CSS样式
accordionB.css
1 /* CSS Document */ 2 3 /*手风琴效果CSS*/ 4 .accordionDiv { 5 width: 660px; 6 height: 400px; 7 margin: 0 auto; 8 position: relative; 9 overflow: hidden; 10 top: 50px; 11 } 12 13 .acdul { 14 position: absolute; 15 } 16 17 .acdul li { 18 display: inline-block; 19 float: left; 20 cursor: pointer; 21 position: relative; 22 overflow: hidden; 23 margin-left: 1px; 24 font-size: 20px; 25 color: #ffffff; 26 font-weight: bold; 27 } 28 29 .acdul img { 30 float: left; 31 position: relative; 32 display: inline-block; 33 } 34 35 .acdul span { 36 float: left; 37 position: absolute; 38 display: block; 39 width: 22px; 40 margin: 5px 0 0 5px; 41 z-index: 100; 42 }
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="text/html; charset=utf-8;width=device-width,initial-scale=1;" /> 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 // }, { 17 // 'title': '手风琴效果图二', 18 // 'src': '/Images/accordion/2.png' 19 // }, { 20 // 'title': '手风琴效果图三', 21 // 'src': '/Images/accordion/3.png' 22 // }, { 23 // 'title': '手风琴效果图四', 24 // 'src': '/Images/accordion/4.png' 25 // }, { 26 // 'title': '手风琴效果图五', 27 // 'src': '/Images/accordion/5.png' 28 // }, { 29 // 'title': '手风琴效果图六', 30 // 'src': '/Images/accordion/6.png' 31 // } 32 //]; 33 34 //$("#accordionDiv").nhsdAccordion({ 35 // 'imglist': dataimglist, 'interval': 'slow' 36 //}); 37 //上面是把数据写在配置项中 38 //这是直接写在DOM结构中 39 $("#accordionDiv").nhsdAccordion({}); 40 //下面是从Ajax()中获取数据的形式,ajaxur后跟的是获取数据源地址 41 //$("#accordionDiv").nhsdAccordion({'ajaxur':'/plug/accordiionB/'}); 42 }); 43 </script> 44 </head> 45 <body> 46 <div> 47 <div id="accordionDiv" class="accordionDiv"> 48 <ul class="acdul"> 49 <li style=" 252px"> 50 <img src="../Images/accordion/1.png" title=""><span>手风琴效果图一</span></li> 51 <li style=" 80px"> 52 <img src="../Images/accordion/2.png" title=""><span>手风琴效果图二</span></li> 53 <li style=" 80px"> 54 <img src="../Images/accordion/3.png" title=""><span>手风琴效果图三</span></li> 55 <li style=" 80px"> 56 <img src="../Images/accordion/4.png" title="手风琴效果图六"><span>手风琴效果图四</span></li> 57 <li style=" 80px"> 58 <img src="../Images/accordion/5.png" title="手风琴效果图六"><span>手风琴效果图五</span></li> 59 <li style=" 80px"> 60 <img src="../Images/accordion/6.png" title="手风琴效果图六"><span>手风琴效果图六</span></li> 61 </ul> 62 </div> 63 </div> 64 </body> 65 </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 }