jq手风琴效果，js手风琴代码

今天有时间做了一个手风琴效果，写的不是很好，但是还可以用，兼用IE7及以上，当然手风琴效果不兼容手机（有机上也没见过手风琴，感觉没有做的必要），后期有可能会写纯css的手风琴效果。

这个手风琴效果还可以再精简一下或者升级一下，这个就后期再说吧，使用的方法在最下方。

希望看见的人点赞一下。

手风琴视图如下：

手风琴代码如下：

<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<ul class="js_accordion clearfix">
    <li>
        <a target="_blank" href="http://cenggel.com/"><img src="http://cenggel.com/wp-content/uploads/2017/12/20171230-2.png" alt="cenggel" width="320" height="450"/></a>
        <h3><a target="_blank" href="http://cenggel.com/">CGLweb前端</a></h3>
    </li>
    <li>
        <a target="_blank" href="http://cenggel.com/"><img src="http://cenggel.com/wp-content/uploads/2017/12/20171230-2.png" alt="cenggel" width="320" height="450"/></a>
        <h3><a target="_blank" href="http://cenggel.com/">CGLweb前端</a></h3>
    </li>
    <li>
        <a target="_blank" href="http://cenggel.com/"><img src="http://cenggel.com/wp-content/uploads/2017/12/20171230-2.png" alt="cenggel" width="320" height="450"/></a>
        <h3><a target="_blank" href="http://cenggel.com/">CGLweb前端</a></h3>
    </li>
    <li>
        <a target="_blank" href="http://cenggel.com/"><img src="http://cenggel.com/wp-content/uploads/2017/12/20171230-2.png" alt="cenggel" width="320" height="450"/></a>
        <h3><a target="_blank" href="http://cenggel.com/">CGLweb前端</a></h3>
    </li>
    <li>
        <a target="_blank" href="http://cenggel.com/"><img src="http://cenggel.com/wp-content/uploads/2017/12/20171230-2.png" alt="cenggel" width="320" height="450"/></a>
        <h3><a target="_blank" href="http://cenggel.com/">CGLweb前端</a></h3>
    </li>
</ul>
<style type="text/css">
    body,ul,li{margin:0; padding:0; outline:none;}
    a:focus{-moz-outline-style:none;}
    a:focus{outline:none;}
    ul,ol{list-style:none;}
    a{text-decoration:none;}
    /*正式css代码*/
    .clearfix:after{content:"."; display:block; height:0; clear:both; visibility:hidden;}
    .clearfix{display:inline-block; display:block; zoom:1;}
    .js_accordion{ width:810px; margin:30px auto;}
    .js_accordion li{ float:left; overflow:hidden; position:relative; border:1px solid #999;}
    .js_accordion,.js_accordion li{ height:450px;}
    .js_accordion li h3{ position:absolute; bottom:0; left:0; z-index:3; width:100%; height:50px; line-height:60px; text-align:center; font-size:14px;}
    .js_accordion li h3 a{ display:block; padding:0 10px; overflow:hidden; color:#fff;}
</style>
<script type="text/javascript">
$(document).ready(function () {
    function sdaasdsd(cgl_wmax,cgl_wminx,cgl_itemli,cgl_wonx){
        var cgl_wmax = cgl_wmax;//最大宽度
        var cgl_wmin = cgl_wminx;//最小宽度
        var cgl_won = cgl_wonx;//默认展开的0开始
        $js_item = $(cgl_itemli);
        $js_item.css('width',cgl_wmin)
        $js_item.eq(cgl_won).css('width',cgl_wmax)
        $js_item.hover(function () {
            var asd1 = $(this);
            var asd2 = $(this).siblings();
            timeer = setTimeout(function () {
                asd2.stop(false,true).animate({'width':cgl_wmin},400);
                asd1.stop(false,true).animate({'width':cgl_wmax},400);
            },200);
        },function () {
            clearTimeout(timeer)
        });
    }

    /**
     * 最大宽度：cgl_wmax  --->例子：'320px'
     * 最小宽度：cgl_wminx  --->例子：'120px'
     * 默认展开：cgl_wonx  --->例子：'.js_accordion li'
     * 活动子级：cgl_itemli  --->例子：3
     * sdaasdsd('cgl_wmax','cgl_wminx','cgl_itemli',cgl_wonx)
     * 代码来自：http://cenggel.com/js/31.html
     * */
    sdaasdsd('320px','120px','.js_accordion li',3)
});
</script>

运行

下载地址：

链接：https://pan.baidu.com/s/1cGx5fw

密码：ojrf