效果
- 點(diǎn)擊相應(yīng)卡片的標(biāo)簽憨降，那么就會(huì)切換至卡片的呈現(xiàn)
- 如果點(diǎn)擊03標(biāo)簽，那么01 02 要一起移動(dòng)
5個(gè)效果圖片
基本HTML結(jié)構(gòu)如下：
- 編寫(xiě)5個(gè)li標(biāo)簽母赵，包含span以及圖片
- 設(shè)置絕對(duì)定位逸爵，溢出部分
overflow:hidden進(jìn)行隱藏
基本5個(gè)li標(biāo)簽需要使用的絕對(duì)定位的居中技巧，使用
lef:50%凹嘲，然后使用margin-lef: - 元素的一半寬度（詳情可以訪問(wèn)CSS 定位布局 - 絕對(duì)痊银、固定定位設(shè)置居中懸浮div）。
大概實(shí)現(xiàn)效果如下：
從上面的三個(gè)截圖可以看到5個(gè)li標(biāo)簽可以排列好了內(nèi)容和圖片了施绎，只要將超出第一個(gè)li標(biāo)簽范圍的進(jìn)行隱藏即可溯革。
使用overflow:hidden贞绳，隱藏溢出部分
每個(gè)li使用left屬性來(lái)改變位置，做出span標(biāo)簽部署有層疊的效果
下一步就是要做出這樣的層疊效果了致稀。
使用絕對(duì)定位以及l(fā)eft參數(shù)設(shè)定位置冈闭，就可以做出這個(gè)效果的了。
好了抖单，寫(xiě)到這里基本完成了HTML萎攒、CSS部分的代碼了，貼出源碼如下：
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function(){
})
</script>
<style type="text/css">
* {
margin: 0;
padding: 0;
font-family: 'Miscrosoft Yahei';
font-size: 14px;
}
.accordion_warp{
width: 642px;
height: 350px;
position: absolute;
margin-top:50px;
margin-left: -321px;
left: 50%;
overflow: hidden;
}
.accordion {
width: 3210px;
list-style: none;
}
.accordion li,span,div{
float: left;
}
.accordion li span{
display: block;
width: 20px;
height: 350px;
color: #fff;
text-align: center;
}
.accordion li div{
width: 622px;
height: 350px;
}
.accordion li:nth-child(1) span{
position: absolute;
left: 0;
background-color: #09E0B5;
}
.accordion li:nth-child(1) div{
position: 20px;
background: url("images/001.jpg");
}
.accordion li:nth-child(2) span{
position: absolute;
left: 562px;
background-color: #3D7FBB;
}
.accordion li:nth-child(2) div{
position: absolute;
left: 582px;
background: url("images/002.jpg");
}
.accordion li:nth-child(3) span{
position: absolute;
left: 582px;
background-color: #5CA716;
}
.accordion li:nth-child(3) div{
position: absolute;
left: 602px;
background: url("images/003.jpg");
}
.accordion li:nth-child(4) span{
position: absolute;
left: 602px;
background-color: #F28B24;
}
.accordion li:nth-child(4) div{
position: absolute;
left: 622px;
background: url("images/004.jpg");
}
.accordion li:nth-child(5) span{
position: absolute;
left: 622px;
background-color: #7C0070;
}
.accordion li:nth-child(5) div{
position: absolute;
left: 642px;
background: url("images/005.jpg");
}
</style>
</head>
<body>
<!-- ul.accordion>(li>span{非洲景色$}+div{這是div})*5 -->
<div class="accordion_warp">
<ul class="accordion">
<li>
<span>非洲景色1</span>
<div></div>
</li>
<li>
<span>非洲景色2</span>
<div></div>
</li>
<li>
<span>非洲景色3</span>
<div></div>
</li>
<li>
<span>非洲景色4</span>
<div></div>
</li>
<li>
<span>非洲景色5</span>
<div></div>
</li>
</ul>
</div>
</html>
下面就是用jquery去控制left的值矛绘，就可以實(shí)現(xiàn)手風(fēng)琴的效果了耍休。
根據(jù)jquery監(jiān)聽(tīng)每個(gè)標(biāo)簽的click事件，根據(jù)點(diǎn)擊的對(duì)象货矮，修改相應(yīng)的left值即可羊精。
根據(jù)點(diǎn)擊li標(biāo)簽，單個(gè)li標(biāo)簽向左移動(dòng)
此時(shí)囚玫，點(diǎn)擊每個(gè)li標(biāo)簽喧锦，就會(huì)自然向左移動(dòng)。
思路解析：根據(jù)點(diǎn)擊事件的$(this).index()就可以知道點(diǎn)擊的是哪個(gè)li抓督，然后再設(shè)置相應(yīng)的左移距離即可燃少。
存在BUG，當(dāng)跨li點(diǎn)擊铃在，中間部分的li標(biāo)簽不會(huì)一起向左移動(dòng)
當(dāng)點(diǎn)擊標(biāo)簽3阵具，效果如下：
這里可以看到標(biāo)簽2并沒(méi)有移動(dòng)，這里就需要將標(biāo)簽3前面的所有l(wèi)i一起移動(dòng)才行定铜，需要使用prevAll()和each()這個(gè)方法來(lái)處理阳液。
編寫(xiě)前面元素一起向左移動(dòng)的方法
可以看到打印出了前面兩個(gè)標(biāo)簽的索引 0 和 1，然后使用each()遍歷操作標(biāo)簽1和標(biāo)簽2的移動(dòng)宿稀。
下面來(lái)看看趁舀，如果點(diǎn)擊標(biāo)簽5赖捌，會(huì)是什么樣的效果祝沸，如下：
如果點(diǎn)擊標(biāo)簽5，那么也是會(huì)操作前面四個(gè)標(biāo)簽越庇。
那么下面剩下的最后的問(wèn)題就是罩锐，點(diǎn)擊標(biāo)簽也要同時(shí)向右移動(dòng)回去，這個(gè)該怎么處理呢卤唉？
首先寫(xiě)單個(gè)向右移動(dòng)的事件
如果需要向右移動(dòng)涩惑，那么就需要有條件判斷什么時(shí)候需要向右移動(dòng)。
簡(jiǎn)單來(lái)想的話桑驱，就是當(dāng)前l(fā)i的位置是處于左邊的位置竭恬，那么此時(shí)再點(diǎn)擊當(dāng)然就要向右了跛蛋。
那么判斷左邊的位置，就需要當(dāng)前l(fā)i的具體距離數(shù)值痊硕，首先打印一下看看是多少赊级，如下：
可以看到右邊的left數(shù)值 和 左邊的left數(shù)值。
考慮使用
nextAll()和each()來(lái)設(shè)置向右移動(dòng)的方法
點(diǎn)擊標(biāo)簽2岔绸，標(biāo)簽3 和 4 則自動(dòng)向右移動(dòng)理逊。
完成代碼如下：
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function(){
$(".accordion li").click(function(){
// alert( $(this).index() );
// 1.點(diǎn)擊li，向左單個(gè)移動(dòng)盒揉。
$(this).children('span').animate({
"left":$(this).index()*20,
},1000)
$(this).children('div').animate({
"left":($(this).index()+1)*20,
},1000)
// 2.處理之前的元素向左同時(shí)移動(dòng)
if($(this).index()>1){
console.log("index > 1");
// console.log("pre index = " + ($(this).index()-1));
$(this).prevAll().each(function(i){
// 打印每個(gè)前面元素的index()索引
// console.log(i + " index=" + $(this).index());
// 已知前面元素的index()索引晋被，那么下面可以設(shè)置left的值了。
$(this).children('span').animate({
"left":$(this).index()*20,
},1000)
$(this).children('div').animate({
"left":($(this).index()+1)*20,
},1000)
})
}
// 3.編寫(xiě)標(biāo)簽單個(gè)向右移動(dòng)的方法
console.log( $(this).index() + " left = " + $.trim($(this).children('span').css("left") ));
console.log(typeof($(this).children('span').css("left")));
if ( $.trim($(this).children('span').css("left")) == ($(this).index()*20 + "px") ) {
// 單個(gè)向右移動(dòng)部分
// alert("turn right!");
$(this).children('span').animate({
"left":542+$(this).index()*20,
},1000)
$(this).children('div').animate({
"left":542+(($(this).index()+1)*20),
},1000)
// 4.批量向右移動(dòng)
$(this).nextAll().each(function(){
$(this).children('span').animate({
"left":542+$(this).index()*20,
},1000)
$(this).children('div').animate({
"left":542+(($(this).index()+1)*20),
},1000)
})
}
})
})
</script>
<style type="text/css">
* {
margin: 0;
padding: 0;
font-family: 'Miscrosoft Yahei';
font-size: 14px;
}
.accordion_warp{
width: 642px;
height: 350px;
position: absolute;
margin-top:50px;
margin-left: -321px;
left: 50%;
overflow: hidden;
}
.accordion {
width: 3210px;
list-style: none;
}
.accordion li,span,div{
float: left;
cursor: pointer;
}
.accordion li span{
display: block;
width: 20px;
height: 350px;
color: #fff;
text-align: center;
}
.accordion li div{
width: 622px;
height: 350px;
}
.accordion li:nth-child(1) span{
position: absolute;
left: 0;
background-color: #09E0B5;
}
.accordion li:nth-child(1) div{
position: 20px;
background: url("images/001.jpg");
}
.accordion li:nth-child(2) span{
position: absolute;
left: 562px;
background-color: #3D7FBB;
}
.accordion li:nth-child(2) div{
position: absolute;
left: 582px;
background: url("images/002.jpg");
}
.accordion li:nth-child(3) span{
position: absolute;
left: 582px;
background-color: #5CA716;
}
.accordion li:nth-child(3) div{
position: absolute;
left: 602px;
background: url("images/003.jpg");
}
.accordion li:nth-child(4) span{
position: absolute;
left: 602px;
background-color: #F28B24;
}
.accordion li:nth-child(4) div{
position: absolute;
left: 622px;
background: url("images/004.jpg");
}
.accordion li:nth-child(5) span{
position: absolute;
left: 622px;
background-color: #7C0070;
}
.accordion li:nth-child(5) div{
position: absolute;
left: 642px;
background: url("images/005.jpg");
}
</style>
</head>
<body>
<!-- ul.accordion>(li>span{非洲景色$}+div{這是div})*5 -->
<div class="accordion_warp">
<ul class="accordion">
<li>
<span>非洲景色1</span>
<div></div>
</li>
<li>
<span>非洲景色2</span>
<div></div>
</li>
<li>
<span>非洲景色3</span>
<div></div>
</li>
<li>
<span>非洲景色4</span>
<div></div>
</li>
<li>
<span>非洲景色5</span>
<div></div>
</li>
</ul>
</div>
</html>
