使用原生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>

下面一起来看看实现效果

  • 3
    点赞
  • 23
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值