标签：.com element tle index style dex 索引 ;; htm
一、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{ width: 500px; height: 250px; margin: 100px auto; position: relative; overflow: hidden; } #box ul li{ width: 500px; height: 250px; position: absolute; top:0; } #box ul li img{ width: 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{
width: 500px;
height: 250px;
margin: 100px auto;
position: relative;
overflow: hidden;
}
#box ul li{
width: 500px;
height: 250px;
position: absolute;
top:0;
}
#box ul li img{
width: 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" ></li>
<li><img src="../img/qin/2.jpg" ></li>
<li><img src="../img/qin/3.jpg" ></li>
<li><img src="../img/qin/4.jpg" ></li>
<li><img src="../img/qin/5.jpg" ></li>
</ul>
</div>
</body>
</html>;
标签：.com element tle index style dex 索引 ;; htm
原文地址：http://www.cnblogs.com/Anne1991/p/6129596.html
