js百叶窗

 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>

猜你喜欢