使用原生js实现网页手风琴效果

核心思路:①所有图片开始阶段的宽度都是一致的（200px） ②获取元素，添加鼠标经过事件 ③利用循环和排他思想，先让所有图片的宽度变小（100px)，再让鼠标指向的那个图片宽度变(600px) ④添加鼠标离开事件，鼠标离开后图片恢复到初始大小（200px)。下面附上实现代码

Html

<!-- ul当中放几个小li嵌套图片即可，注意图片的初始宽高必须设置成一致的 -->
    <div class="bigBox">
      <ul>
        <li>
          <img src="./q.jpg" alt="" />
        </li>

        <li>
          <img src="./q4.jpg" alt="" />
        </li>

        <li>
          <img src="./q2.jpg" alt="" />
        </li>

        <li>
          <img src="./q3.jpg" alt="" />
        </li>
        <li>
          <img src="./q.jpg" alt="" />
        </li>

        <li>
          <img src="./q4.jpg" alt="" />
        </li>

        <li>
          <img src="./q2.jpg" alt="" />
        </li>
      </ul>
    </div>

Css

 <style>
      .bigBox {
        width: 1500px;
        height: 1000px;
        margin: 100px auto;
      }

      li {
        float: left;
        list-style: none;
      }
      li img {
        width: 200px;
        height: 400px;
        transition: 0.5s all; //添加过度效果，使手风琴效果更美观
      }
    </style>

javaScript

 <script>
      let lis = document.querySelectorAll(".bigBox img");  //获取每个图片
      //利用for循环为每个图片添加事件
      for (let i = 0; i < lis.length; i++) {
        // 鼠标经过
        lis[i].addEventListener("mouseenter", function () {
          //  怕他思想，让所有小li宽度全部变为100px，鼠标指向那个宽度变为600px
          for (let j = 0; j < lis.length; j++) {
            lis[j].style.width = "100px";
          }
          // 让选中的变为600px
          lis[i].style.width = "600px";
        });
        // 鼠标离开
        lis[i].addEventListener("mouseleave", function () {
          for (let j = 0; j < lis.length; j++) {
            lis[j].style.width = "200px";
          }
        });
      }
    </script>

下面一起来看看实现效果