手风琴

  <!DOCTYPE html>
  <html lang="en">
   
  <head>
  <meta charset="UTF-8">
  <title>横向手风琴</title>
  <style>
  * {margin: 0;padding: 0;}
  .container {
  width: 1000px;
  height: 400px;
  margin: 0 auto;
  margin-top: 120px;
  box-shadow: 0 0 4px black;
  }
  /* 关键点就是将ul设置为弹性盒，然后通过flex-grow来对每个li进行控制 */
  ul {
  width: 100%;
  height: 100%;
  list-style: none;
  display: flex;
  }
  li {
  width: 70px;
  height: 100%;
  overflow: hidden;
  transition: .5s;
  }
  .current{
  flex-grow: 10; /* 将当前的li的flex-grow值设置为10 */
  }
  </style>
  </head>
   
  <body>
  <div class="container">
  <ul>
  <li class="current"><img src="./img/1.jpg" alt="" height="400"></li>
  <li><img src="./img/2.jpg" alt="" height="400"></li>
  <li><img src="./img/3.jpg" alt="" height="400"></li>
  <li><img src="./img/4.jpg" alt="" height="400"></li>
  <li><img src="./img/5.jpg" alt="" height="400"></li>
  </ul>
  </div>
  <script>
  // 获取DOM元素
  let li = document.getElementsByTagName("li");
  let container = document.getElementsByClassName("container")[0];
  let enter = function () {
  // 首先使用for循环将所有的li的class值给清空
  for(let i=0;i<li.length;i++)
  {
  li[i].className = "";
  }
  // 然后再将当前的li的class赋值为current
  this.className = "current";
  }
  // 通过for循环给所有的li添加mouseenter事件
  for (let i = 0; i < li.length; i++) {
  li[i].addEventListener("mouseenter", enter, false);
  }
  </script>
  </body>
   
  </html>
posted @ 2019-09-02 00:45  小样Q  阅读(99)  评论(0)    收藏  举报