jquery实现手风琴效果

手风琴效果
图示：
jquery实现手风琴效果

成都网站建设哪家好，找成都创新互联公司！专注于网页设计、网站建设、微信开发、成都小程序开发、集团企业网站建设等服务项目。核心团队均拥有互联网行业多年经验，服务众多知名企业客户；涵盖的客户类型包括：假山制作等众多领域，积累了大量丰富的经验，同时也获得了客户的一致赞扬！

html代码：

红玫瑰

白玫瑰

白玫瑰

白玫瑰

白玫瑰



    css代码：
    *{
            margin: 0;
            padding: 0;
        }
        img{
            border: none;
            display: block;
        }
            #acc {
                width: 640px;
                height: 140px;
                margin: 0 auto;
            }
            #acc ul  {
                border-left:1px solid #ddd ;
                height: 140px;
                position: relative;
            }
            #acc ul li {
                width:50px;
                height: 138px;
                border: 1px solid #ddd;
                float: left;
                list-style: none;
                border-left: 0;
                position: relative;
                overflow: hidden;
            }
            #acc ul li.active {
                width: 434px;

            }
            #acc ul li h4 {
                font-size: 14px;
                color: #000;
                font-weight:100;
                width: 14px;
                height: 98px;
                padding: 40px 18px 0;

            }
            #acc ul li h4.active {
                background: #f42760;
                color: #fff;
            }
            #acc ul li  div {
                width: 383px;
                height: 138px;
                background: blue;
                position: absolute;
                top: 0;
                left: 50px;
                border-left:1px solid #ddd ;
                z-index: 0;
            }
            #acc ul li img{
                width: 383px;
                height: 138px;
            }
            #acc ul li.last {
                position: absolute;
                top: 0;
                right: 0;
            }

js代码：

当前文章：jquery实现手风琴效果
当前URL：http://dzwzjz.com/article/igehcj.html

大橙子网站建设，新征程启航

jquery实现手风琴效果

红玫瑰

白玫瑰

白玫瑰

白玫瑰

白玫瑰

其他资讯