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>