1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>百叶窗</title>
<style>
.box{
width:1200px;
height:400px;
border:1px solid black;
position:relative;
overflow:hidden;
}
.son{
width:700px;
height:400px;
position:absolute;
}
</style>
6 </head>
7 <body>
8 <div class="box">
9 <div class="son" style=background:red; >1</div>
10 <div class="son" style=background:pink;>2</div>
11 <div class="son" style=background:green;>3</div>
12 <div class="son" style=background:yellow;>4</div>
13 </div>
14 </body>
<script type="text/javascript">
var bo=document.querySelector(".box"); /*1.获取大盒*/
var so=document.querySelectorAll(".son"); /*2.获取所有的子元素*/
var ow=so[0].offsetWidth; /*子级获取父级的宽度*/
var ew=(bo.offsetWidth-ow)/(so.length-1);
//父级减去子级的宽度除子集的长度,为什么-1,因为有一个不用4-1;三个位置
fun1();
function fun1(){
for(var i=0; i<so.length;i++){ /*for循环取子元素的长度*/
so[i].index=i /*取子元素的对应位置的*/
so[i].style.left=(i>0?ow+(i-1)*ew:0)+"px"; /*如果i>0父级的就执行(i-1)就是他跑的距离*ew距离是0；*/
so[i].onmouseover=function(){
fun1()
for(var j=1;j<=this.index;j++) /*j=1,从1开始，这是所有是位置。j++;*/
so[j].style.left=j*ew+"px"; /*输出网页子元素左边的j*ew*/
}
}
}
</script>
15 </html>
