js手风琴

小番水源

已于 2022-09-16 16:59:38 修改

阅读量119

点赞数

分类专栏： js 文章标签： javascript html 前端

于 2022-09-16 16:59:37 首次发布

本文链接：https://blog.csdn.net/weixin_43368552/article/details/126893986

版权

js 专栏收录该内容

47 篇文章 0 订阅

订阅专栏

主要是鼠标经过事件、鼠标离开事件、排他思想（先全部干掉，再复活自己）

<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <title>手风琴</title>
  <style>
    ul {
      list-style: none;
    }

    * {
      margin: 0;
      padding: 0;
    }

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

    div li {
      width: 240px;
      height: 400px;
      float: left;
      transition: all 500ms;
    }

    div ul {
      width: 1200px;
    }
  </style>
</head>

<body>
  <div id="box">
    <ul>
      <li>
        <a href="#">
          <img src="./images/1.jpg" alt="">
        </a>
      </li>
      <li>
        <a href="#">
          <img src="./images/2.jpg" alt="">
        </a>
      </li>
      <li>
        <a href="#">
          <img src="./images/3.jpg" alt="">
        </a>
      </li>
      <li>
        <a href="#">
          <img src="./images/4.jpg" alt="">
        </a>
      </li>
      <li>
        <a href="#">
          <img src="./images/5.jpg" alt="">
        </a>
      </li>
    </ul>
  </div>
</body>
<script>
  // 1 li 默认高度是240px  
  // 2. 当鼠标经过的时候，当前的li宽度变大800px，其他的li变为100px
  // 3 鼠标离开事件，所有的小li都要复原为宽度240px

  // 1) 获取元素
  let lis = document.querySelectorAll('li')
  // 2)绑定鼠标经过和离开事件
  for (i = 0; i < lis.length; i++) {
    // 3)鼠标经过
    lis[i].addEventListener('mouseenter', function () {

      // 使用排他思想    干掉所有人，复活我自己
      for (let j = 0; j < lis.length; j++) {
        lis[j].style.width = '100px'
      }
      this.style.width = '800px'
    })
    // 4)鼠标离开
    
    lis[i].addEventListener('mouseleave', function () {
      for (let j = 0; j < lis.length; j++) {
        lis[j].style.width = '240px'
      }
    })
  }

</script>

</html>