一、html+css布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>手风琴</title>
<script src='../../package/move.js'></script>
<style>
*{
list-style: none;
margin: 0;
padding: 0;
}
#box{
500px;
height: 250px;
margin: 100px auto;
position: relative;
overflow: hidden;
}
#box ul li{
500px;
height: 250px;
position: absolute;
top:0;
}
#box ul li img{
500px;
height: 250px;
}
</style>
</head>
<body>
<div id="box">
<ul>
<li><img src="../img/qin/1.jpg" alt=""></li>
<li><img src="../img/qin/2.jpg" alt=""></li>
<li><img src="../img/qin/3.jpg" alt=""></li>
<li><img src="../img/qin/4.jpg" alt=""></li>
<li><img src="../img/qin/5.jpg" alt=""></li>
</ul>
</div>
</body>
</html>;
二、获取需要操作的元素
var oBox=document.getElementById('box');
var aLi=oBox.getElementsByTagName('li');
三、布局
分析布局可以知道，第一个li的left值为0，位置是不需要变化的
我们假设右边每个竖条的宽度为30 var w=30；
第二个li的left值为：oBox的盒模型的宽度减去4*w -------->4===aLi.length-1;
第三个li的left值为：oBox的盒模型的宽度减去3*w -------->3===aLi.length-2;
第三个li的left值为：oBox的盒模型的宽度减去2*w -------->2===aLi.length-3;
第三个li的left值为：oBox的盒模型的宽度减去1*w -------->1===aLi.length-4;
//布局
var w=30;
for(var i=1;i<aLi.length;i++){
aLi[i].style.left=oBox.offsetWidth-(aLi.length-i)*w+'px';
}
四、for循环，给每个li添加一个鼠标移入事件
假设移入之后的样式为上图所示，则分析布局：
左边：
第一个：left为w*0;
第二个：left为w*1
中间部分：left为w*2
右边：
第一个：left为oBox.offsetWidth-2*w+'px';-------->2===(aLi.length-3)*w+'px';
第二个：left为oBox.offsetWidth-1*w+'px';-------->1===(aLi.length-4)*w+'px';
所以我们需要循环判断li是在左边还是在右边，假设每个li上面都有一个索引值，从0开始，则第一个的索引值为0，第二个为1，第三个为2，依次类推，如果i的值是小于等于当前li的index的时候，则使li全部处于左边，否则处于右边，代码如下：
for(var i=0;i<aLi.length;i++){
aLi[i].index=i;
aLi[i].onmouseover=function(){
for(var i=0;i<aLi.length;i++){
if(i<=this.index){
/*aLi[i].style.left=i*w+'px';*/
move(aLi[i],{left:i*w})
}else{
/*aLi[i].style.left=oBox.offsetWidth-(aLi.length-i)*w+'px';*/
move(aLi[i],{left:oBox.offsetWidth-(aLi.length-i)*w})
}
};
};
};
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>手风琴</title>
<script src='../../package/move.js'></script>
<style>
*{
list-style: none;
margin: 0;
padding: 0;
}
#box{
500px;
height: 250px;
margin: 100px auto;
position: relative;
overflow: hidden;
}
#box ul li{
500px;
height: 250px;
position: absolute;
top:0;
}
#box ul li img{
500px;
height: 250px;
}
</style>
<script>
window.onload=function(){
var oBox=document.getElementById('box');
var aLi=oBox.getElementsByTagName('li');
//布局
var w=30;
for(var i=1;i<aLi.length;i++){
aLi[i].style.left=oBox.offsetWidth-(aLi.length-i)*w+'px';
}
for(var i=0;i<aLi.length;i++){
aLi[i].index=i;
aLi[i].onmouseover=function(){
for(var i=0;i<aLi.length;i++){
if(i<=this.index){
/*aLi[i].style.left=i*w+'px';*/
move(aLi[i],{left:i*w})
}else{
/*aLi[i].style.left=oBox.offsetWidth-(aLi.length-i)*w+'px';*/
move(aLi[i],{left:oBox.offsetWidth-(aLi.length-i)*w})
};
};
};
};
};
</script>
</head>
<body>
<div id="box">
<ul>
<li><img src="../img/qin/1.jpg" alt=""></li>
<li><img src="../img/qin/2.jpg" alt=""></li>
<li><img src="../img/qin/3.jpg" alt=""></li>
<li><img src="../img/qin/4.jpg" alt=""></li>
<li><img src="../img/qin/5.jpg" alt=""></li>
</ul>
</div>
</body>
</html>;