用插件封装手风琴

最新推荐文章于 2019-06-20 19:50:35 发布

温柔女魔头

最新推荐文章于 2019-06-20 19:50:35 发布

阅读量143

点赞数

CC 4.0 BY-SA版权

分类专栏： jQuery

本文链接：https://blog.youkuaiyun.com/qq_19880197/article/details/86749464

jQuery 专栏收录该内容

19 篇文章

订阅专栏

HTML

<div id="box">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>

CSS

*{
    padding: 0;
    margin: 0;
    list-style: none;
}
#box{
    width: 1200px;
    height: 400px;
    border: 2px solid black;
    margin: 100px auto;
    overflow: hidden;
}
li{
    width: 240px;
    height: 400px;
    float: left;

}
ul{
    width: 1300px;
}

jquery

<script src="jQuery/jquery-1.12.3.js"></script>
    <script>
        $(function () {
            $.fn.accordion=function (colors,width) {
                colors=colors || [];
                width=width || 0;
                var $li= this.find("li");

                var boxLength=this.width();
                var maxLength=boxLength-($li.length-1)*width;
                var avgLength=boxLength/$li.length;

                $li.each(function (i,e) {
                    $(e).css("backgroundColor",colors[i]);
                });
                $li.on("mouseenter",function () {
                    $(this).stop().animate({width:maxLength}).siblings().stop().animate({width:width});
                });
                $li.on("mouseleave",function () {
                    $li.stop().animate({width:avgLength})
                });
            };
            var colors=["green","red","yellow","cyan","purple"];
            $("#box").accordion(colors,50);

        });
    </script>