<!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. 使用Slf4j集成Log4j2构建项目日志系统的完美解决方案

    一.背景 最近因为公司项目性能需要,我们考虑把以前基于的log4j的日志系统重构成基于Slf4j和log4j2的日志系统,因为,使用slf4j可以很好的保证我们的日志系统具有良好的兼容性,兼容当前常见 ...

  2. Linux中杀不死的进程

    前段时间,一哥们,去杀Linux服务器的进程,发现kill命令失灵了,怎么杀都杀不死. 然后上网查了下资料,原来是要被杀的进程,成为了僵尸进程. 僵尸进程的查看方法: 利用命令ps,可以看到有标记为Z ...

  3. JS多线程（web work）

    JS多线程JS多线程不允许操作DOM 1. 引用Concurrent Thread.js库用法:Concurrent.Thread.Create(function(){};) 2. Web Workh ...

  4. 【转】Js获取当前日期时间及格式化操作

    (转自:http://www.cnblogs.com/qinpengming/archive/2012/12/03/2800002.html) var myDate = new Date(); myD ...

  5. webServer-----Spring 集成cxf笔录

    目前webserver主要有俩中方式:1,传统的webserver标准集成方式-生成WSDL的xml文档.       2, 基于restful风格的webserver java RESTful We ...

  6. IBM Z上邮件服务器的配置相关内容

    https://www.ibm.com/support/knowledgecenter/SSLTBW_1.13.0/com.ibm.zos.r13.halz002/sen.htm#sen 每次搜太费劲 ...

  7. jQuery简单倒计时插件

    一. 效果预览 二. 实现 1. 按照特定的类结构布局. 2. 需要先引入jQuery,再引入此文件. /** * Author: CC11001100 * * 简单倒计时 * * 1. 支持页面内同 ...

  8. C/C++面试知识点总结

    1.中缀,后缀,前缀表达式: 后缀表达式是波兰逻辑学家卢卡西维奇(Lukasiewicz)发明的一种表示表达式的方法.这种表示方式把运算符写在运算对象的后面,例如,把a+b写成ab+,所以也称为后缀式 ...

  9. Python-模块

    一.模块(modue)的概念: 在计算机程序的开发过程中,随着程序代码越写越多,在一个文件里代码就会越来越长,越来越不容易维护. 为了编写可维护的代码,我们把很多函数分组,分别放到不同的文件里,这样, ...

  10. 2016-11-05实战-定义ssh服务的日志

    1.编辑/etc/rsyslog.conf 输入 local 0 .*     /var/log/sshd.log   #日志的保存路径 2.定义ssh服务的日志级别 编辑sshd服务的主配置文件:/ ...