html手风琴案例

我们在前端开发的时候经常遇到鼠标经过的时候发生事件，鼠标离开的时候发生事件的效果

下面看看效果图

这下来看看我们的代码吧

html部分

  <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>

 css部分

    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;
    }

这下来看看最重要的部分JavaScript

    // 1.获取元素
    let lis = document.querySelectorAll('li')
    // 2.绑定事件
    for(let i = 0 ; i < lis.length ; i++){
      // 鼠标经过就发生事件
      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(){
        for(let j = 0 ; j < lis.length; j++){
          lis[j].style.width = '240px'
        }
      })
    }

完美的结束本次案例。