<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>手风琴</title>

    <link href="css/accordion.css" rel="stylesheet">

    <script src="js/jquery-1.11.1.min.js"></script>

    <script src="js/accordion.js"></script>

    <script>

        $(function(){

            //插件的应用

            $("#ul1").accordion();

        });

    </script>

</head>

<body>

<ul id="ul1">

    <li>111111111<span>第一块</span></li>

    <li>22222222222<span>第二块</span></li>

    <li>33333333333<span>第三块</span></li>

    <li>444444444<span>第四块</span></li>

    <li>555555555<span>第五块</span></li>

</ul>

</body>

</html>

js部分

/**

 * Created by Iecy on 14-9-5.

 * 手风琴插件

 */

;(function($){

    $.fn.extend({

        accordion:function(options){

            var defaults = {

                width:"800px",

                spanWidth:20,

                hideWidth:700

            };

            var options = $.extend(defaults,options);

            var obj = $(this); //当前对象

            var obj_children = obj.children();//当前对象下的子级（第一级）

            var obj_childern_len = obj_children.length;//子级的个数

            var aLeft = [];

            obj_children.each(function(){

                var index = $(this).index();

                $(this).css({zIndex:obj_childern_len-index,left:options.spanWidth*index+"px"});//初始化各个li层级和位置

                aLeft[index] = $(this).position().left;//保存下各个手风琴键的位置

            });

            obj_children.mouseover(function(){

                var index = $(this).index();

                obj_children.each(function(){

                    if($(this).index()<index){

                        obj_children.eq($(this).index()).stop().animate({left:aLeft[$(this).index()]-options.hideWidth+"px"});

                    }else{

                        obj_children.eq($(this).index()).stop().animate({left:aLeft[$(this).index()]+'px'});

                    }

                });

            });

        }

    });

})(jQuery);

css部分

 * {margin:; padding:; list-style:none;}

        /*展开：720px        收起：20px*/

        #ul1 {width:800px; height:400px; border:1px solid red; margin:10px auto; position:relative; overflow:hidden;}

        #ul1 li {width:720px; height:400px; background:#CCC; position:absolute;}

        #ul1 li span {position:absolute; top:; right:; background:#C66; width:18px; height:398px; border:1px solid black; color:white; text-align:center;}

个人练习，路过下就可以了。

Jquery学习插件之手风琴的更多相关文章

  1. Jquery 学习插件第一天

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title&g ...

  2. jQuery学习之路（8）- 表单验证插件-Validation

    ▓▓▓▓▓▓ 大致介绍 jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 ...

  3. 深入学习jQuery自定义插件

    原文地址:jQuery自定义插件学习 1.定义插件的方法 对象级别的插件扩展,即为jQuery类的实例增加方法, 调用:$(选择器).函数名(参数);      $(‘#id’).myPlugin(o ...

  4. jQuery学习之：Validation表单验证插件

    http://polaris.blog.51cto.com/1146394/258781/ 最近由于公司决定使用AJAX + Struts2来重构项目,让我仔细研究一下这两个,然后集中给同事讲讲,让每 ...

  5. 基于jquery的插件turn.js学习笔记

    基于jquery的插件turn.js学习笔记 简介 turn.js是一个可以实现3d书籍展示效果的jq插件,使用html5和css3来执行效果.可以很好的适应于ios和安卓等触摸设备. How it ...

  6. JQuery zoom插件学习

    jquery zoom是一款图片放大插件,经常用在商城商品页面里. 使用JQuery zoom插件,除了需要引入JQuery.js外,还要引入JQuery.zoom.js文件及jqzoom.css文件 ...

  7. jQuery学习笔记（jquery.form插件）

    官网: http://malsup.com/jquery/form/ jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地.无侵入地升级HTML表单以支持Ajax.jQuery Fo ...

  8. jQuery学习笔记 - 基础知识扫盲入门篇

    jQuery学习笔记 - 基础知识扫盲入门篇 2013-06-16 18:42 by 全新时代, 11 阅读, 0 评论, 收藏, 编辑 1.为什么要使用jQuery? 提供了强大的功能函数解决浏览器 ...

  9. jQuery学习之路（1）-选择器

    ▓▓▓▓▓▓ 大致介绍 终于开始了我的jQuery学习之路!感觉不能再拖了,要边学习原生JavaScript边学习jQuery jQuery是什么? jQuery是一个快速.简洁的JavaScript ...

随机推荐

  1. 8. UIViewController

    1. UIViewController 的认识 UIViewController在iOS开发中占据很重要的位置,iOS的整个UI开发的核心思想也是MVC的架构,从UIViewController的命名 ...

  2. JHChart 1.1.0 iOS图表工具库中文ReadMe

    JHChart(最新版本1.1.0) 好吧,的确当前的github上已经存有不少的iOS图表工具库,然而,当公司的项目需要图表时,几乎没有哪个第三方能够完全满足我的项目需求.无奈之下,本人不得不花费一 ...

  3. [Android Pro] 完美Android Cursor使用例子（Android数据库操作）

    reference to : http://www.ablanxue.com/prone_10575_1.html 完美 Android Cursor使用例子(Android数据库操作),Androi ...

  4. 控制window.print不打印某些内容

    <style type="text/css" media="print"> .noprint { display:none;} </style ...

  5. 【转载】制作一个超精简的WIN7.gho

    首先说明一点,这个Resource不是我制作的,Google搜了下GHO镜像文件制作,挺复杂的.如果要从头到尾自己制作GHO文件可以参考: http://baike.so.com/doc/674790 ...

  6. 支付宝支付-APP支付服务端详解

    支付宝APP支付服务端详解 前面接了微信支付,相比微信支付,支付宝APP支付提供了支付分装类,下面将实现支付宝APP支付.订单查询.支付结果异步通知.APP支付申请参数说明,以及服务端返回APP端发起 ...

  7. d-规则

    [问题描述]对任意给定的m(m∈N+)和n(n∈N+),满足m<n,构造一初始集合:P={x|m≤x≤n,x∈N+} (m,n≤100).现定义一种d规则如下:若存在a∈P,且存在K∈N+ ,K ...

  8. Scrum 项目4.0

    队友: 郭志豪:http://www.cnblogs.com/gzh13692021053/ 杨子健:http://www.cnblogs.com/yzj666/ 刘森松:http://www.cnb ...

  9. su root认证失败的解决方法

    sudo passwd 输入安装密码. 输入新密码. 输入 su 即获得root权限.

  10. jQuery 遍历函数

    转载http://www.cnblogs.com/tylerdonet/archive/2013/04/05/3000618.html jQuery 遍历函数包括了用于筛选.查找和串联元素的方法. 函 ...