Jquery学习插件之手风琴

时间：2021-07-11 00:20:15
<!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;}

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

相关文章