首页 > 代码库 > javascript原生百叶窗

javascript原生百叶窗

2024-10-31 21:42:39   211人阅读

<!DOCTYPE html>
  <html>
  <head>
  <meta charset="UTF-8">
  <title></title>
  <style>
  .box{
  width:1200px;
  height:400px;
  border:1px solid black;
  position:relative;
  overflow:hidden;
  }
  .son{
  width:700px;
  height:400px;
  position:absolute;
   
  }
   
  </style>
  </head>
  <body>
  <div class="box">
  <div class="son" style=background:red; >1</div>
  <div class="son" style=background:pink;>2</div>
  <div class="son" style=background:green;>3</div>
  <div class="son" style=background:yellow;>4</div>
  </div>
  </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>
  </html>

javascript原生百叶窗


联系
我们