<!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. JSFiddle

    <script async src="//jsfiddle.net/980355088/k0u1qjm6/embed/"></script>

  2. [转]VS2012 快捷键

    Ctrl+E,D ----格式化全部代码       Ctrl+A+K+F Ctrl+E,F ----格式化选中的代码     Ctrl+K+F CTRL + SHIFT + B生成解决方案   Al ...

  3. ionic + cordova+angularJs 搭建的H5 App完整版总结

      为期半个月的项目实践开发,已完整告一段落,团队小组获得第一名,辛苦总算没有白费,想起有一天晚上,整个小组的人,联调到12点才从公司回去,真是心酸.这里总结一下,项目过程中遇到的问题 和感悟.哈哈, ...

  4. android studio使用ndk,jni随记

    1.下载ndk(会下载到sdk目录下) 2.配置 3.配置build.gradle(app) android { defaultConfig { ndk { moduleName "JniD ...

  5. 马氏距离(Mahalanobis distance)

    马氏距离(Mahalanobis distance)是由印度统计学家马哈拉诺比斯(P. C. Mahalanobis)提出的,表示数据的协方差距离.它是一种有效的计算两个未知样本集的相似度的方法.与欧 ...

  6. Flume（4）实用环境搭建：source(spooldir)+channel(file)+sink(hdfs)方式

    一.概述: 在实际的生产环境中,一般都会遇到将web服务器比如tomcat.Apache等中产生的日志倒入到HDFS中供分析使用的需求.这里的配置方式就是实现上述需求. 二.配置文件: #agent1 ...

  7. 四则运算app代码上传GITHUB

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

  8. BZOJ2763 [JLOI2011]飞行路线（SPFA + DP）

    题目 Source http://www.lydsy.com/JudgeOnline/problem.php?id=2763 Description Alice和Bob现在要乘飞机旅行,他们选择了一家 ...

  9. React虚拟DOM浅析

    在Web开发中,需要将数据的变化实时反映到UI上,这时就需要对DOM进行操作,但是复杂或频繁的DOM操作通常是性能瓶颈产生的原因,为此,React引入了虚拟DOM(Virtual DOM)的机制. 什 ...

  10. hello！

    今天是个星期天 第一次开通了朕的博客 么么哒 感觉很困 唔~晚安zzzzz