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; }