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

浏览: 389次 日期:2017年12月30日 22:42:38 作者:青格勒

今天有时间做了一个手风琴效果,写的不是很好,但是还可以用,兼用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

文章链接:http://cenggel.com/js/31.html

版权声明:文章《jq手风琴效果,js手风琴代码》由青格勒编写,转载请带上文章链接。

本章内容纯属乱讲,如有雷同,纯属巧合。如有借鉴之处已表明出处。

点击任意位置关闭窗口,感谢您的支持。


打赏规则 - 为了避免对于打赏模式产生误解,说明一下几点内容:

  • 1.打赏纯粹自愿,金额不限,别太多,1块就行;
  • 2.打赏不能作为解答疑问的理由;
  • 3.打赏不能帮你做毕业设计或论文;
  • 4.打赏不能帮你做工作中的项目;
  • 5.打赏就是这不能那不能,只是单纯打赏而已。
  • 5.最后谢谢支持。
关闭
相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注