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