jquery伸缩式手风琴网页特效

html代码

<div class="container">
    <div class="accordion-box" style="padding-top: 40px">
        <ul id="accordion-b">
            <li style="left: 0; z-index: 5;">
                <div class="left">
                    <div class="shadow">
                        <div class="title">
                            意大利设计领衔国际精英设计团队<br>
                            前沿设计潮流风尚服务每个中国家
                        </div>
                    </div>
                    <img src="images/1.jpg" alt="前沿设计" style="display: inline;">
                </div>
                <div class="right">
                    <div class="title text-title">前沿设计</div>
                    <div class="sub-title text-sub">Cutting-edge design</div>
                </div>
            </li>
            <li style="left: 100px; z-index: 4;">
                <div class="left">
                    <div class="shadow">
                        <div class="title">
                            东易日盛经过20余载施工实践积累<br>
                            良心工程只为美好幸福家
                        </div>
                    </div>
                    <img src="images/2.jpg" alt="良心工程" style="display: inline;">
                </div>
                <div class="right">
                    <div class="title text-title">良心工程</div>
                    <div class="sub-title text-sub">Conscience project</div>
                </div>
            </li>
            <li style="left: 200px; z-index: 3;">
                <div class="left">
                    <div class="shadow">
                        <div class="title">
                            欧洲8+N施工工艺<br>
                            国际高标准服务每个家
                        </div>
                    </div>
                    <img src="images/3.jpg" alt="欧系工艺" style="display: inline;">
                </div>
                <div class="right">
                    <div class="title text-title">欧系工艺</div>
                    <div class="sub-title text-sub">European process</div>
                </div>
            </li>
            <li style="left: 300px; z-index: 2;">
                <div class="left">
                    <div class="shadow">
                        <div class="title">
                            选材全球化万千好料汇聚家<br>
                            国际一线品牌品质有保障
                        </div>
                    </div>
                    <img src="images/4.jpg" alt="全球选材" style="display: inline;">
                </div>
                <div class="right">
                    <div class="title text-title">全球选材</div>
                    <div class="sub-title text-sub">Material selection</div>
                </div>
            </li>
            <li style="left: 400px; z-index: 1;">
                <div class="left">
                    <div class="shadow">
                        <div class="title">
                            全屋环保才是真环保<br>
                            从基材到成品层层验收
                        </div>
                    </div>
                    <img src="images/5.jpg" alt="全屋环保" style="display: inline;">
                </div>
                <div class="right">
                    <div class="title text-title">全屋环保</div>
                    <div class="sub-title text-sub">Environmental</div>
                </div>
            </li>
            <li style="left:500px;z-index:0">
                <div class="left">
                    <div class="shadow">
                        <div class="title">
                            严守每个交付环节专注每个细节<br>
                            A股上市品质国家监管安心交付
                        </div>
                    </div>
                    <img src="images/6.jpg" alt="完美交付" style="display: inline;">
                </div>
                <div class="right">
                    <div class="title text-title">完美交付</div>
                    <div class="sub-title text-sub">Perfect delivery</div>
                </div>
            </li>
        </ul>
    </div>
</div>

JS代码

<script src="images/jquery.min.js"></script>
<script>
    $(function(){
        $('#accordion-b').find('li').on('mouseover', function () {
            var index = $(this).index();
            $('#accordion-b').find('li').each(function (i, c) {
                if (i < index) {
                    $(c).css('left', -600 + i * 100 + 'px')
                } else {
                    $(c).css('left', i * 100 + 'px')
                }
            });
        });
    });
</script>

CSS代码

.container{ width: 1200px; margin: 0 auto}
.accordion-box {
    width: 100%;
    height: 360px;
}
.accordion-box ul {
    padding: 0;
    width: inherit;
    height: 360px;
    overflow: hidden;
    position: relative;
}
.accordion-box ul li {
    width: 700px;
    position: absolute;
    top: 0;
    transition: all ease .3s 0s;
    -moz-transition: all ease .3s 0s;
    -webkit-transition: all ease .3s 0s;
}
.accordion-box ul li .left {
    width: 600px;
    height: inherit;
    overflow: hidden;
    position: relative;
    float: left;
}
.accordion-box ul li .left .shadow {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.3);
    transition: all ease .3s 0s;
    -moz-transition: all ease .3s 0s;
    -webkit-transition: all ease .3s 0s;
}
.accordion-box ul li .left .shadow .title {
    width: 460px;
    height: 70px;
    color: #fff;
    line-height: 2;
    font-size: 18px;
    text-align: center;
    overflow: hidden;
    position: absolute;
    top: 130px;
    left: 70px;
}
.accordion-box ul li .left img {
    z-index: -1;
    width: 700px;
    height: 360px;
    transition: all ease .3s 0s;
    -moz-transition: all ease .3s 0s;
    -webkit-transition: all ease .3s 0s;
}
.accordion-box ul li:nth-child(odd) .right {
    background: #dee0e2;
}
.accordion-box ul li .right {
    width: 100px;
    height: 360px;
    float: left;
    position: relative;
    transition: all ease .3s 0s;
    -moz-transition: all ease .3s 0s;
    -webkit-transition: all ease .3s 0s;
}
.accordion-box ul li:nth-child(odd) .right::before {
    border-right-color: #dee0e2;
}
.accordion-box ul li .right::before {
    transition: all ease .3s 0s;
    -moz-transition: all ease .3s 0s;
    -webkit-transition: all ease .3s 0s;
    content: '';
    display: block;
    position: absolute;
    z-index: 2;
    top: 48%;
    left: -10px;
    width: 0;
    height: 0;
    border-right-width: 10px;
    border-right-style: solid;
    border-top-width: 10px;
    border-top-style: solid;
    border-top-color: transparent;
    border-bottom-width: 10px;
    border-bottom-style: solid;
    border-bottom-color: transparent;
}
.accordion-box ul li .right .title {
    writing-mode: vertical-lr;
    writing-mode: tb-lr;
    position: absolute;
    top: 115px;
    left: 50px;
    font-size: 24px;
    -webkit-writing-mode: tb-lr;
    -ms-writing-mode: tb-lr;
}
.text-title {
    color: #212628;
}
.accordion-box ul li .right .sub-title {
    -ms-writing-mode: tb-lr;
    writing-mode: vertical-lr;
    writing-mode: tb-lr;
    position: absolute;
    top: 115px;
    font-size: 14px;
    left: 27px;
}
.text-sub {
    color: #666;
}

.accordion-box ul li:nth-child(even) .right {
    background: #f6f8fa;
}
.accordion-box ul li:nth-child(even) .right::before {
    border-right-color: #f6f8fa;
}
.accordion-box ul li:hover .right {
    background-color: #e74c3c;
    color: #fff;
}
.accordion-box ul li:hover .right::before {
    border-right-color: #e74c3c;
}
.accordion-box ul li:hover .right .title {
    color: #fff;
}
.accordion-box ul li:hover .right .sub-title {
    color: #fafafa;
}