手风琴效果就是内容的折叠与打开，在这个插件中，使用了三种数据来源：1、直接写在DOM结构中；2、将数据写在配置项中；3、从Ajax()中获取数据。在这一版中，各项的切换没有添加动画效果，在下一版中会是有动画效果的。

在这个插件中，CSS和JS的配置非常重要，需要特别注意。另外，加个思考，请先看完后再想这个问题：当点击其中某项时，给width直接添加animate是否合适，当快速在其上移动时，如何保证效果？

效果图预览

插件JS

accordionB.js

 ;

 (function ($, window, document, undefined) {

     var defaults = {

         'isajax': false, //是否从ajax加载数据

         'isDom': true, //是否是DOM数据,即直接写在DOM结构中,为默认项

         'isConfiguration': false,//是否是配置数据

         'imglist': [],//配置数据

         'ajaxurl': ''

     };

     $.fn.nhsdAccordion = function (options) {

         var $parentDiv = $(this);

         var $opts = $.extend({}, defaults, options);

         var $mouseoverTile = "";

         function initDom() {

             $parentDiv.html("");

             var $ul = $('<ul></ul>', { 'class': 'acdul' }).appendTo($parentDiv);

             for (var i = 0, j = $opts.imglist.length; i < j; i++) {

                 var temp = $opts.imglist[i];

                 var $li;

                 if (i == 0) {

                     $li = $('<li></li>', { 'style': 'width:252px' }).appendTo($ul);

                 } else {

                     $li = $('<li></li>', { 'style': 'width:79px' }).appendTo($ul);

                 }

                 var $img = $('<img />', { 'src': temp.src, 'title': temp.title }).appendTo($li);

                 var $tit = $('<span></span>').html(temp.title).appendTo($li);

             }

             liEvent();

         }

         function liEvent() {

             $(".acdul li").bind("click", function () {

                 $mouseoverTile = $(this).find('img').attr('title');

                 $(this).find('img').removeAttr('title');

                 $(this).parent().find('li').attr('style', 'width:80px');

                 $(this).attr('style', 'width:252px');

             }).bind('mouseout', function () {

                 $(this).find('img').attr('title', $mouseoverTile);

             });

         }

         function initAjax() {

             $.ajax({

                 type: 'get',

                 url: $opts.ajaxurl,

                 cache: false,

                 dataType: 'json',

                 beforeSend: function () { },

                 success: function (d) {

                     $opts.imglist = d;

                     initDom();

                 },

                 error: function () { }

             });

         }

         if ($opts.isajax == true) {

             initAjax();

         } else if ($opts.isConfiguration == true) {

             initDom();

         } else if ($opts.isDom == true) {

             liEvent();

         }

         return this;

     }

 })(jQuery, window, document);

CSS样式

accordionB.css

 /* CSS Document */

 /*手风琴效果CSS*/

 .accordionDiv {

     width: 660px;

     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;

         margin-left: 1px;

         font-size: 20px;

         color: #ffffff;

         font-weight: bold;

     }

     .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:;

     }

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="text/html; charset=utf-8;width=device-width,initial-scale=1;" />

 <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'

             //        }, {

             //            'title': '手风琴效果图二',

             //            'src': '/Images/accordion/2.png'

             //        }, {

             //            'title': '手风琴效果图三',

             //            'src': '/Images/accordion/3.png'

             //        }, {

             //            'title': '手风琴效果图四',

             //            'src': '/Images/accordion/4.png'

             //        }, {

             //            'title': '手风琴效果图五',

             //            'src': '/Images/accordion/5.png'

             //        }, {

             //            'title': '手风琴效果图六',

             //            'src': '/Images/accordion/6.png'

             //        }

             //];

             //$("#accordionDiv").nhsdAccordion({

             //    'imglist': dataimglist, 'interval': 'slow'

             //});

             //上面是把数据写在配置项中

             //这是直接写在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: 252px">

                     <img src="../Images/accordion/1.png" title=""><span>手风琴效果图一</span></li>

                 <li style="width: 80px">

                     <img src="../Images/accordion/2.png" title=""><span>手风琴效果图二</span></li>

                 <li style="width: 80px">

                     <img src="../Images/accordion/3.png" title=""><span>手风琴效果图三</span></li>

                 <li style="width: 80px">

                     <img src="../Images/accordion/4.png" title="手风琴效果图六"><span>手风琴效果图四</span></li>

                 <li style="width: 80px">

                     <img src="../Images/accordion/5.png" title="手风琴效果图六"><span>手风琴效果图五</span></li>

                 <li style="width: 80px">

                     <img src="../Images/accordion/6.png" title="手风琴效果图六"><span>手风琴效果图六</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;

 }

jQuery插件实例四：手风琴效果[无动画版]的更多相关文章

jQuery插件实例五：手风琴效果[动画效果可配置版]
昨天写了个jQuery插件实例四:手风琴效果[无动画版]那个是没有动画效果的,且可配置性不高,本篇为有动画效果.对于一些数据做了动态的计算,以实现自适应. 欢迎大家入群相互交流,学习,新群初建,欢迎各 ...
ASP.NET中使用jQuery插件实现图片幻灯效果
参照网上的资料及提供的jQuery插件实现图片幻灯效果. 1.页面前台代码: //头部引用 <head runat="server"><title>< ...
JQuery插件：动态列和无间隙网格布局Mason.js
来源:GBin1.com 在线演示 JavaScript提供很多强有力的方案,解决动态列的网格布局(例如:Pinterest).这些方案很有效,但是,有时候,会造成网格的间隙或粗糙的边缘. Mason ...
jQuery插件实例一：年华时代插件Alert对话框
在工作中使用jQuery插件相信对于程序员来说非常普遍,在网络上也有很多优秀的插件可供大家使用,功能非常强大.在之前用过的一些插件中,有些太过追求功能的强大和可配置性,造成使用的复杂度上升.个人认为与 ...
一个很简单的jQuery插件实例教程(菜鸟级)
很多公司的前端设计开发人员都是女孩子,而这些女孩子很多JavaScript技能都不是很好.而前端开发过程中,JavaScript技能又是必不可少的.所以,如果前端小MM正在为某个JavaScript效 ...
jQuery插件实现图片展开效果，jquery.gallery。仿腾讯QQ空间说说图片展示效果。
公司的项目http://www.umfun.com/,有个说说的页面(和腾讯QQ空间说说一样),里面有个发表图片功能,上传完图片,需要点击展开的效果. 当时手里面事情比较多(公司就我一个前端),忙不过 ...
jQuery插件实例三：图片滚动[切换]效果一
图片切换效果在很多网站上都能看到,是一种常见的广告/活动宣传方式,通常位于网页上端.这个插件是众多图片切换效果的形式中的一种,数据源可在前端配置,也可从后台通JSON格式传输数据,当然,数据格式是固定 ...
【jquery插件】-网页下雪效果
又到了年底,从圣诞节开始,可以发现各大网站的活动是越来越多,都变的银装素裹,本人由于业务需求也需要做这么一个效果,所以就通过google大神找了一下相关资源,结果就出现了N种雪花效果的方式.种 ...
网站开发常用jQuery插件总结(四）验证插件validation
在网站开发过程中,有时我们需要验证用户输入的信息是否符合我们的要求,所以我们会对用户提交的数据进行验证.验证分两次进行,一次是在客户端,一次是在服务端.客户端的验证可以提升用户的体验. jquery验 ...

随机推荐

软件架构设计学习总结（3）：QQ空间技术架构之详解
QQ空间作为腾讯海量互联网服务产品,经过近七年的发展,实现了从十万级到亿级同时在线的飞跃.在这个过程中,QQ空间团队遇到了哪些技术挑战?其站点前后台架构随着业务规模的变化又进行了怎样的演进与变迁?成长 ...
扒一扒HTTPS网站的内幕
215年6月,维基媒体基金会发布公告,旗下所有网站将默认开启HTTPS,这些网站中最为人所知的当然是全球最大的在线百科-维基百科.而更早时候的3月,百度已经发布公告,百度全站默认开启HTTPS.淘宝也 ...
Netty 高性能之道 - Recycler 对象池的复用
前言我们知道,Java 创建一个实例的消耗是不小的,如果没有使用栈上分配和 TLAB,那么就需要使用 CAS 在堆中创建对象.所以现在很多框架都使用对象池.Netty 也不例外,通过重用对象,能够避 ...
从xml文件取值
假设有个 test.xml,包含以下字段: <config> <property name="login_protocol" value="http&q ...
[翻译]C# BAD PRACTICES: Learn how to make a good code by bad example---C#：如何将坏的代码重新编译为好的代码
自己的前言说明: 本文原作者:Radoslaw Sadowski,原文链接为:C# BAD PRACTICES: Learn how to make a good code by bad exampl ...
python变量作用域,函数与传参
一.元组传值: 一般情况下函数传递参数是1对1,这里x,y是2个参数,按道理要传2个参数,如果直接传递元祖,其实是传递一个参数 >>> def show( x, y ): ... p ...
python学习之老男孩python全栈第九期_day011作业
1. 编写函数.(函数执行的时间是随机的) import timeimport randomdef random_time(): ''' 执行时间随机的函数 :return: ''' time.sle ...
drupal常用api
最短的函数 // 语言字串,除了可以获取对应语言外,还可以设置字串变量.可以是!var, @var或 %var,%var就添加元素外层.@var会过滤HTML,!var会原样输出HTML,%var会添 ...
在vue项目中，通过v-for循环，动态添加后台返回的事件
一.现有一种业务需求,前端的某个元素添加点击事件,但事件是后台返回的(不确定),需要动态添加,下面是具体思路: .假定后台返回数据为如下格式: list: [ { name: '李寻欢', kungF ...
基于 Web 的 Go 语言 IDE - Wide 1.5.2 发布！
这个版本由热心的开源贡献者加入了韩语支持,欢迎各位 gophers 加入到 Wide 的开源开发中.另外,这个版本还改进了 Playground,使其更稳定和易用.目前黑客派社区已经支持嵌入 Wide ...

jQuery插件实例四：手风琴效果[无动画版]