js实现手风琴案例

诗霖雪

于 2023-12-04 18:40:55 发布

阅读量1k

点赞数 30

分类专栏： js 文章标签： javascript css css3

本文链接：https://blog.csdn.net/m0_56713342/article/details/134791126

版权

js 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    ul {
      width: 1200px;
      height: 400px;
      overflow: hidden;
      border: 1px solid red;
      margin: 100px auto;
    }

    li {
      float: left;
      width: 240px;
      height: 400px;
      transition: all 1s;
    }
  </style>
</head>

<body>

  <ul>
    <li><img src="./images/1.jpg" alt=""></li>
    <li><img src="./images/2.jpg" alt=""></li>
    <li><img src="./images/3.jpg" alt=""></li>
    <li><img src="./images/4.jpg" alt=""></li>
    <li><img src="./images/5.jpg" alt=""></li>

  </ul>
  <script>

    const lis = document.querySelectorAll('li')
    for (let i = 0; i < lis.length; i++) {//鼠标移入时，移入的那个li宽度变为800px，其他的里宽度为100px
      lis[i].addEventListener('mouseenter', function () {
        for (let j = 0; j < lis.length; j++) {
          lis[j].style.width = '100px'
        }
        this.style.width = '800px'
      })
      lis[i].addEventListener('mouseleave', function () {//鼠标移出时，所有的li宽都为240px
        for (let j = 0; j < lis.length; j++) {
          lis[j].style.width = '240px'
        }
      })
    }

  </script>
</body>

</html>